Webpack生产环境：如何避免覆盖已生成的带哈希Chunk文件？

当然可以搞定这个问题！核心思路是让Webpack只有在代码真的发生变化时才重新生成对应的chunk文件，避免无意义的文件覆盖导致修改日期变更。下面是具体的配置方案：

1. 启用Webpack持久化缓存（Webpack 5+推荐） #

Webpack 5内置了文件系统级别的持久化缓存，能复用之前编译的结果，未修改的模块不会重新编译，自然也不会重新生成文件。在webpack.config.js中添加如下配置：

const path = require('path');

module.exports = {
  // ...其他配置
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    cacheDirectory: path.resolve(__dirname, '.webpack-cache'), // 指定本地缓存目录
    buildDependencies: {
      config: [__filename] // 当配置文件修改时，自动清空缓存
    }
  }
};

这个配置会把编译过程的缓存存在本地目录里，下次编译时直接复用未变更模块的缓存结果，不会重新生成内容未变的chunk文件，也就不会修改文件的修改日期。

2. 用contenthash确保哈希严格绑定文件内容 #

把文件名的哈希部分换成contenthash——它是完全基于文件内容计算的，只有文件内容真的变了，哈希值才会改变，文件名也才会更新。这样内容未变的chunk会保留原来的文件名，不会被覆盖：

module.exports = {
  // ...其他配置
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[id].[contenthash].js'
  }
};

别用chunkhash或者hash，前者基于chunk整体计算，后者是全局编译哈希，都不如contenthash精准，容易出现内容没变化但哈希变了的情况。

3. 优化旧文件清理策略（针对clean-webpack-plugin） #

如果你在用clean-webpack-plugin清理输出目录，默认它会删除所有旧文件再重新生成——这会导致即使内容没变化，文件也会被重新创建，修改日期自然变了。可以调整插件配置，只清理不再被项目引用的旧文件，保留未变更的现有文件：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false, // 仅清理Webpack本次编译不再生成的文件
      protectWebpackAssets: true // 保护当前编译生成的文件不被误删
    })
  ]
};

4. 关闭不必要的生产环境选项 #

比如关闭output.pathinfo，它默认会在输出文件里添加模块路径注释，即使内容没变化，这个注释也可能导致Webpack重新生成文件。生产环境下建议关闭：

module.exports = {
  // ...其他配置
  output: {
    pathinfo: false
  }
};

按照上面的配置调整后，Webpack只会在代码真的变更时才重新生成对应的chunk文件，未变更的文件不会被覆盖，修改日期也不会变化，msdeploy自然就不会同步那些没变化的文件了。

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