React项目中bundle.js 404未找到问题求助

首先给你吃个定心丸：本地目录看不到bundle.js是完全正常的！webpack-dev-server为了提升编译和加载速度，默认会把打包后的文件存在内存里，不会写入本地磁盘，所以你在项目文件夹里找不到它，这点不用纠结~

接下来解决浏览器404的问题，核心原因是访问端口不匹配：

你的webpack配置里devServer.port设为了3000，说明webpack-dev-server是在本地3000端口运行的，但你用Valet的域名http://letsreact.test访问时，默认走的是Valet的80端口，浏览器自然找不到3000端口上的bundle.js文件。

给你两个可行的解决方案：

方案1：直接指定端口访问 #

访问项目时不要用http://letsreact.test，改成http://letsreact.test:3000，这样浏览器就会去3000端口请求dev-server内存里的bundle.js，问题就能解决。

方案2：用Valet反向代理（无需加端口） #

如果你不想每次都手动加端口，可以用Valet的反向代理功能，把letsreact.test的请求转发到webpack-dev-server的3000端口：
打开命令行，进入你的项目根目录，执行：

valet proxy letsreact http://localhost:3000

之后直接访问http://letsreact.test就能正常加载bundle.js了。

额外的配置优化提示（针对Webpack 4） #

你的webpack配置用的是旧版语法，Webpack 4有两处需要调整的地方，虽然不是当前404的直接原因，但能避免后续踩坑：

1. 旧版的loaders数组要改成rules；
2. babel loader需要明确写成babel-loader（确保你已经安装了babel-loader包）；
3. 你的配置把port:3000嵌套在watchOptions里了，这是错误的，要移到devServer顶层。

调整后的配置示例：

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

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