webpack5中mini-css-extract-plugin导致main.js的contenthash无故变更如何解决

问题原因 #

该问题是mini-css-extract-plugin 2.x早期版本的已知缺陷：插件注入CSS模块关联逻辑时，默认使用不稳定的自增数字作为模块ID，两次构建的模块ID生成结果不一致，导致main.js内容无意义变更，最终contenthash失效。

可落地解决方案 #

• 方案1：升级依赖版本
  将mini-css-extract-plugin升级到2.7.0及以上版本，官方已在该版本修复了模块ID不稳定的问题，升级后无需额外配置即可解决hash变动问题。
• 方案2：配置稳定CSS模块ID
  如果受项目兼容性限制无法升级插件，可手动配置css-loader的模块ID生成规则，使用固定哈希规则替代自增ID：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  // 其他配置保持不变
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[path][name]__[local]--[contenthash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()]
}

• 方案3：开启webpack确定性ID配置
  在webpack配置中添加全局稳定模块ID规则，该配置对所有类型模块生效，不受插件影响：

module.exports = {
  // 其他配置保持不变
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: 'deterministic'
  }
}

验证方式 #

配置完成后连续执行两次构建命令，对比dist目录下main.js的文件名哈希值，前后一致即为修复成功。

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