React项目配置webpack-dev-server遇bundle.js 404错误求助

我一眼就看出问题出在webpack配置里的路径设置错误，尤其是devServer的publicPath和output.path这两个关键项，咱们一步步来修正：

1. 修复output.path的路径拼写错误 #

你当前的output.path写法少了一个关键的斜杠，导致路径解析异常：

// 错误写法（__dirname和dist之间没有分隔斜杠）
path: `${__dirname}dist/app/js`

这会让webpack把路径解析成类似/private/var/www/mysite.comdist/app/js的错误格式，正确写法需要添加斜杠分隔：

output: {
  path: `${__dirname}/dist/app/js`, // 添加斜杠确保路径拼接正确
  filename: "bundle.js"
}

2. 修正devServer.publicPath的配置 #

这是导致404的核心问题！webpack-dev-server的publicPath是用来告诉服务器：内存中的bundle文件应该通过哪个URL路径对外暴露，它必须是相对于contentBase的相对路径，而不是绝对路径。

你现在用了绝对路径${__dirname}/dist/app/js/，会让dev-server把bundle映射到一个和页面引用不匹配的奇怪URL下。把publicPath改成/js/就对了：

devServer: {
  hot: true,
  contentBase: `${__dirname}/dist/app/`,
  publicPath: '/js/' // 改为相对于contentBase的路径
}

这样dev-server会把内存中的bundle.js映射到http://localhost:8080/js/bundle.js，正好和你index.html里的<script src="js/bundle.js"></script>引用完全匹配。

3. 额外检查项 #

• 确认入口文件./src/app/js/index.jsx确实存在于指定路径
• 确保babel相关依赖已安装：babel-preset-react、babel-preset-es2015、babel-plugin-transform-class-properties，可以通过npm list命令检查依赖状态

修正后重启webpack-dev-server，你会看到控制台输出变成：

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /js/
ℹ ｢wds｣: Content not from webpack is served from /private/var/www/mysite.com/dist/app/

这时候再访问localhost:8080，bundle.js就能正常加载了！

内容的提问来源于stack exchange，提问作者Alan P.