Webpack能否在代码变更时自动编译打包文件？生产环境打包遗忘问题如何解决？

嘿，你的这几个问题都是日常开发里很典型的痛点，我来给你详细梳理下：

1. Webpack能不能在代码变更时自动编译？ #

当然可以！而且你正在用的webpack-dev-server本身就自带这个能力——它会监听你源码文件的变化，一旦检测到修改，就会自动重新编译，并且把编译后的文件存在内存里（这样速度更快），还能自动刷新浏览器或者做热模块替换（HMR）。不过默认情况下它不会把编译产物写入磁盘，如果需要同时写入磁盘，可以在webpack.config.js里调整devServer.writeToDisk配置为true。

2. 代码变更时后台自动构建生产环境bundle可行吗？ #

完全可行！这个需求刚好能解决你“忘记执行npm run build就推生产”的问题。不过要注意，生产构建会包含压缩、tree-shaking、代码分割等一系列优化步骤，速度比开发编译慢一些，所以要根据自己的场景选择合适的实现方式。

3. 最佳实现方式 #

结合你的情况，这里有两种实用方案，更推荐第二种：

方案一：Webpack原生watch模式（简单场景适用） #

Webpack本身支持watch模式，开启后会持续监听文件变化，一旦有修改就自动执行生产构建。你可以在package.json的scripts里新增一条命令：

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

运行npm run build:watch后，它就会在后台持续运行，每次代码变更都会自动重新构建生产环境的bundle.js并写入磁盘。

不过这个方案有个小缺点：每次构建都要跑完整的生产优化流程，速度可能偏慢；而且如果不小心在构建未完成时推送代码，还是会有问题。

方案二：Git钩子触发构建（推荐，从流程上保障） #

如果你的项目用Git管理，更推荐用Git钩子来自动触发生产构建，这样能确保你推送代码前一定会执行npm run build，从根源上避免忘记构建的问题。

具体步骤：

1. 安装husky（一款好用的Git钩子管理工具）：

npm install husky --save-dev

2. 在package.json里配置pre-push钩子：

{
  "husky": {
    "hooks": {
      "pre-push": "npm run build"
    }
  }
}

这样，当你执行git push的时候，Git会自动先运行npm run build，只有构建成功了才允许推送；如果构建失败（比如有语法错误），推送会被直接终止，避免坏代码流入生产环境。

这个方案的优势很明显：不需要一直开着监听进程，只有在你要推送的时候才触发构建，节省资源；而且从流程上强制保障了生产bundle的最新性，完美解决你的痛点。

补充：开发与生产环境的配合建议 #

如果你既需要开发时的快速热重载（用webpack-dev-server），又要保障生产构建的及时性，建议把两者分开：

• 开发阶段运行npm start（对应webpack-dev-server --mode development），专注于调试，享受快速的热重载；
• 借助Git钩子，在推送代码前自动触发npm run build，确保生产环境拿到的是最新的编译产物。

这样既不影响开发效率，又彻底解决了“忘记build”的问题。

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