配置React与Webpack环境后，Hello World编译成功却无正常输出求助

我之前刚搭React环境的时候也碰到过一模一样的情况——编译提示成功，打开页面啥都没有，急得不行！咱们一步步来排查，应该很快就能找到问题：

1. 先确认DOM挂载节点是否存在 #

你写的React代码里肯定有类似ReactDOM.render(<App />, document.getElementById('root'))的语句吧？那得先检查你的src/index.html里有没有对应的<div id="root"></div>，而且这个节点必须放在引入打包后JS的<script>标签前面，不然JS执行的时候找不到这个元素，根本没法渲染内容。

2. 检查webpack配置的入口输出&dev-server设置 #

你的package.json里start脚本是webpack-dev-server --hot，build脚本会把src/index.html复制到dist。这里要注意两个点：

• 你的webpack.config.js里的entry是不是指向./src/index.js？output的path和filename有没有配置正确？比如输出到dist文件夹下的bundle.js
• dev-server默认会从项目根目录加载静态文件，要是你的index.html在src文件夹里，启动dev-server的时候得指定--content-base src/，不然dev-server找不到你的html，加载的就是空白页面。可以把start脚本改成：webpack-dev-server --hot --content-base src/

3. 补全Babel相关配置和依赖 #

你package.json里只列了babel-core，但React需要专门的preset来编译JSX语法。首先得安装必要的依赖：

npm install babel-preset-react babel-preset-env --save-dev

然后在项目根目录新建.babelrc文件，内容如下：

{
  "presets": ["env", "react"]
}

另外，webpack.config.js里的module规则要加上babel-loader处理js/jsx文件：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

要是没这些配置，JSX没法被编译成浏览器能识别的JS，组件自然渲染不出来。

4. 别忘了装react和react-dom！ #

很多人一开始只装了Babel、webpack这些开发依赖，却忘了装核心的react和react-dom生产依赖，运行以下命令确认安装：

npm install react react-dom --save

要是没装的话，浏览器控制台会直接报找不到React的错误，虽然编译可能没提示。

5. 一定要看浏览器控制台！ #

编译成功不代表运行时没错误！按F12打开开发者工具，切到Console标签，看看有没有红色报错——比如找不到DOM节点、React未定义、JSX编译错误这些，都是导致页面空白的常见原因。

6. 检查build后的文件是否正常 #

运行npm run build后，打开dist文件夹里的index.html，看看里面有没有正确引入打包后的JS文件（比如bundle.js），路径对不对。要是路径错了，JS加载失败，页面肯定是空白的。

极简正确示例参考 #

你可以对照着检查自己的代码：

src/index.html

<!DOCTYPE html>
<html>
<head>
  <title>React Hello World</title>
</head>
<body>
  <!-- 挂载节点必须在script前面 -->
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

const HelloWorld = () => <h1>Hello World!</h1>;

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

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // 省略文件后缀
  }
};

按照上面的步骤排查，应该很快就能解决问题啦！

内容的提问来源于stack exchange，提问作者rhuann