React+Webpack项目打包正常但React组件无法渲染问题求助

我仔细看了你的配置和代码，这里有几个关键问题导致React组件无法渲染，咱们一步步来排查：

1. DevServer 静态文件目录配置错误 #

你的devServer.contentBase设置为./src，但你的index.html是放在项目根目录下的，并非src文件夹内。这就导致当你启动webpack-dev-server后，访问localhost:3000时，DevServer会去src目录找index.html，找不到的话就会返回默认页面，自然不会加载你的bundle.js，代码也就没机会执行。

解决方法：
把devServer.contentBase改成项目根目录，修改webpack配置：

devServer: {
  contentBase: __dirname, // 指向项目根目录
  hot: true,
  port: 3000,
  historyApiFallback: true
}

2. 直接打开本地文件的路径问题（若未使用DevServer） #

如果你是直接双击打开根目录的index.html，浏览器会用file://协议，此时src="bundle.js"会指向根目录下的文件，但你的webpack输出的bundle.js在dist文件夹里，路径不匹配。需要修改index.html的脚本引用：

<script type="text/javascript" src="./dist/bundle.js"></script>

不过更推荐用webpack-dev-server运行，它会把打包文件放在内存中，访问更顺畅。

3. 额外优化：Babel预设版本兼容性 #

你用的presets: ['react', 'es2015']是Babel 6的旧写法，如果你的Babel版本是7+，建议升级为新的预设包，避免潜在的编译兼容问题（虽然你提到bundle里能看到代码，但升级后更稳定）：

• 先安装依赖：npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev
• 再修改webpack的loader配置：

use: {
  loader: 'babel-loader',
  query: {
    presets: ['@babel/preset-react', '@babel/preset-env']
  }
}

验证步骤 #

修改配置后：

• 重启webpack-dev-server
• 访问localhost:3000，打开浏览器控制台，查看是否打印了made it here
• 如果控制台有日志，说明代码已执行，组件应该能正常渲染

按照上面的步骤调整后，你的Hello World组件就能正常显示了！

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