使用NPM与Webpack时，如何避免修改JS文件后每次执行npm run build？

直接给你几个实用方案，不用再每次手动跑命令：

1. 用Webpack自带的Watch模式 #

Webpack本身支持监听文件变化自动编译，不用额外装插件。

• 修改package.json里的scripts字段，新增一条命令：

  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  }
  

• 运行npm run watch，之后你修改JS或其他配置的文件，Webpack会自动检测变化并重新编译，不用再手动敲npm run build。
• 注意：watch模式只是自动编译，浏览器不会自动刷新，你需要手动刷新页面看效果。

2. 用Webpack Dev Server（推荐） #

这是更便捷的方案，不仅自动编译，还能自动刷新浏览器，甚至支持热模块替换。

• 先确保装了webpack-dev-server：npm install webpack-dev-server --save-dev
• 修改package.json的scripts：

  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  }
  

• 运行npm start，Webpack会启动一个本地开发服务器，自动打开浏览器。之后你修改文件，它会自动编译并刷新页面，完全不用手动操作。

3. 开启热模块替换（HMR），实现无刷新更新 #

如果不想每次修改都刷新整个页面（比如保留页面状态），可以开启HMR：

• 在webpack.config.js里配置：

  const webpack = require('webpack');
  
  module.exports = {
    // ...其他配置
    devServer: {
      hot: true // 开启热替换
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin() // 引入热替换插件
    ]
  };
  

• 在你的入口JS文件（比如src/index.js）末尾加一段代码：

  if (module.hot) {
    module.hot.accept();
  }
  

• 运行npm start后，修改组件或模块内容，页面只会更新变化的部分，不会整个刷新，开发体验更丝滑。

额外优化：加快编译速度 #

如果编译还是慢，可以加这些配置进一步提速：

• 在webpack.config.js里开启缓存：

  module.exports = {
    // ...
    cache: {
      type: 'filesystem' // 用文件系统缓存编译结果
    }
  };
  

• 用babel-loader的缓存（如果用Babel的话）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          options: {
            cacheDirectory: true // 开启Babel缓存
          }
        }
      ]
    }
  };
  

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