Webpack是否适用于开发环境？修改代码后需重复打包吗？

嘿，完全不用怀疑——Webpack绝对适合开发环境，而且官方早就为咱们开发者准备了一套高效的开发工具链，能彻底解决你每次修改代码都要手动重新打包的麻烦！

1. 告别手动重复打包：用webpack-dev-server实现自动更新 #

你现在遇到的每次修改都要重新打包的问题，用webpack-dev-server就能轻松解决。它是Webpack官方提供的开发服务器，核心优势就是：

• 启动本地开发服务器，自动托管打包后的文件
• 实时监听源码变化，一旦检测到修改，自动重新打包并刷新浏览器
• 打包后的文件直接存在内存里，比写入磁盘快得多，开发效率拉满

快速上手步骤：

• 先安装依赖：

  npm install webpack-dev-server --save-dev
  

• 在webpack.config.js中添加devServer配置：

  module.exports = {
    // 你的其他配置...
    devServer: {
      static: './dist', // 指定静态文件托管目录
      hot: true, // 开启热模块替换（强烈推荐）
      open: true, // 启动服务器后自动打开浏览器
    },
  };
  

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

  "scripts": {
    "start": "webpack serve --mode development"
  }
  

之后运行npm start，修改foo.js或其他源码时，浏览器会自动同步更新，再也不用手动执行打包命令了！

2. 进阶体验：热模块替换（HMR）实现无刷新更新 #

如果觉得全页面刷新还是不够高效，可以开启热模块替换（Hot Module Replacement）。它能在不刷新整个页面的前提下，只更新你修改的那个模块，保留页面当前状态（比如表单输入、组件状态），开发体验会更丝滑。

除了上面配置里的hot: true，还需要在webpack.config.js中添加对应的插件：

const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

启动服务器后，修改代码就能看到局部更新的效果了。

关于你提到的window.dynamo闭包计划 #

其实用官方的开发工具链之后，基本不需要手动搞闭包加载的方案——webpack-dev-server已经帮你处理了模块的加载和更新逻辑。但如果你的项目有特殊场景需要手动控制模块加载，也可以结合Webpack的externals配置或者动态导入（import()）功能实现，不过还是更推荐官方工具链，它经过大量测试，稳定性和效率都更有保障。

总的来说，Webpack在开发环境的体验非常成熟，用好官方提供的工具，能大大提升你的开发效率！

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