Webpack配置学习遇阻：app.bundle.js 404未找到错误求助

嘿，我之前刚踩过这个坑！你现在的情况很典型：Webpack默认只在执行npm run build时才会生成dist目录下的打包文件，但开发过程中你肯定希望文件能实时生成/更新，不然浏览器自然找不到还没生成的app.bundle.js。下面给你一步步拆解解决方案：

问题根源梳理 #

1. 你的HTML里大概率是手动写了<script src="dist/app.bundle.js"></script>，但开发模式下没触发打包的话，这个文件根本不存在，浏览器就会报错。
2. 你还没配置Webpack的开发服务或监听模式，导致只有手动执行build命令才会生成打包产物。

具体解决方案 #

1. 用HtmlWebpackPlugin自动注入脚本（避免手动路径错误）

首先确保你已经安装了这个插件：npm install html-webpack-plugin --save-dev，然后在webpack.config.js里配置它，让插件自动帮你把打包后的JS注入到HTML中，不用手动写路径：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 你的项目入口文件
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 每次打包清空dist目录，避免冗余文件
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的源HTML文件路径
      filename: 'index.html' // 输出到dist目录的HTML文件名
    })
  ]
};

这样配置后，Webpack会自动在生成的HTML里添加正确的JS引用，不用再担心路径写错。

2. 配置Webpack Dev Server（开发首选）

devServer会把打包后的文件放在内存中，实时响应代码变化，不用手动反复build：

• 先安装依赖：npm install webpack-dev-server --save-dev
• 在webpack.config.js里添加devServer配置：

module.exports = {
  // 其他配置...
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    hot: true, // 热模块替换，修改代码不用刷新整个页面
    open: true, // 启动服务器后自动打开浏览器
    port: 3000 // 自定义端口，可选
  }
};

• 在package.json的scripts里添加启动命令：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

现在运行npm start，devServer会启动一个本地服务，浏览器能正常加载页面，代码修改后也会实时更新，而且控制台不会再报找不到文件的错误。

3. 备选：用Watch模式自动打包

如果不想用devServer，可以让Webpack监听文件变化，自动重新打包：

• 在package.json的scripts里添加：

"scripts": {
  "watch": "webpack --watch --mode development",
  "build": "webpack --mode production"
}

运行npm run watch后，Webpack会在你修改代码时自动重新生成dist目录下的文件，浏览器刷新后就能加载到最新的app.bundle.js了。

按照上面的步骤操作，应该就能彻底解决这个问题啦！核心思路就是让Webpack在开发过程中自动处理打包文件，要么放内存（devServer），要么实时生成（watch），再配合插件自动管理脚本引用，就不会再出现找不到文件的情况了。

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