Question

我正在用webpack做我的第一个React应用程序。我从教程中输入了一些代码，开发服务器正常工作，没有错误显示，但浏览器中只显示了一个文本“ TEST HERE：”。

Component App似乎无法运行。

我的代码正在关注

index.js：

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>

App.js：

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.

Answer 1

您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>

组件应用无法运行

1 个答案: