代码之家 › 专栏 › 技术社区 › P.K.

组件应用程序无法运行

webpack-dev-server webpack reactjs

P.K. · 技术社区 · 6 年前

组件应用程序似乎无法运行。

我的代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">

  <title>React App</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  TEST HERE:
  <div id="root"></div>
</body>

</html>

import React, { Component } from 'react';
import {hot} from "react-hot-loader";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default hot(module)(App);

怎么解决?我的配置有什么问题?

慰问:

C:\work\First-React-App\first-react-app>npx webpack-dev-server --mode development
i ï½¢wdsï½£: Project is running at http://localhost:3000/
i ï½¢wdsï½£: webpack output is served from http://localhost:3000/dist/
i ï½¢wdsï½£: Content not from webpack is served from C:\work\First-React-App\first-react-app\public\
i ï½¢wdmï½£: Hash: 5852d82b0e01ae152bc3
Version: webpack 4.12.0
Time: 1735ms
Built at: 2018-08-18 15:40:55
    Asset      Size  Chunks             Chunk Names
bundle.js  1.17 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index.js 52 bytes {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {main} [built]
[./node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.54 KiB {main} [built]
[./src/App.js] 2.78 KiB {main} [built]
[./src/index.css] 1.05 KiB {main} [built]
[./src/index.js] 677 bytes {main} [built]
[./src/registerServiceWorker.js] 4.26 KiB {main} [built]
    + 53 hidden modules
i ï½¢wdmï½£: Compiled successfully.

1 回复 | 直到 6 年前

devserkan 6 年前

你失踪了 bundle.js index.html 文件,以便代码中不显示任何内容。

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  TEST HERE:
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>