如何为Webpack Chunk添加自定义动态参数解决缓存失效问题

要实现通过HTML中的全局变量自动为所有Webpack Chunk请求添加自定义参数，解决contenthash不变时的缓存失效问题，可按以下步骤操作：

1. 配置HTML模板定义全局参数 #

修改你的HTML模板（如src/index.html），在页面最顶部定义全局变量，同时动态加载初始Chunk：

<head>
  <script>
    // 直接修改这个值即可触发全量缓存刷新
    window.MY_CUSTOM_PARAM = '12345';
  </script>
</head>
<body>
  <script>
    // 这里的Chunk名称需和Webpack输出的初始Chunk对应
    const initialChunks = ['main.js'];
    initialChunks.forEach(chunk => {
      const script = document.createElement('script');
      script.src = `${chunk}?v=${window.MY_CUSTOM_PARAM}`;
      document.body.appendChild(script);
    });
  </script>
</body>

2. 修改Webpack配置 #

关闭自动注入初始Chunk #

在webpack.config.js中配置html-webpack-plugin，禁止自动注入脚本：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...其他基础配置（entry、output等）
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: false, // 禁用自动注入，改用模板中的动态加载逻辑
    }),

添加自定义插件处理动态Chunk #

新增一个Webpack插件，修改动态Chunk的URL生成逻辑，自动拼接自定义参数：

// 自定义插件：为动态加载的Chunk添加URL参数
    new class AddCustomChunkParam {
      apply(compiler) {
        compiler.hooks.compilation.tap('AddCustomChunkParam', (compilation) => {
          compilation.hooks.runtimeModule.tap('AddCustomChunkParam', (module) => {
            // 定位到JSONP Chunk加载的Runtime模块
            if (module.name.includes('jsonp chunk loading')) {
              const source = module.source()._value;
              // 替换Chunk URL生成代码，追加自定义参数
              module.source()._value = source.replace(
                /return __webpack_require__.p\+chunkId;/,
                `return __webpack_require__.p + chunkId + '?v=' + window.MY_CUSTOM_PARAM;`
              );
            }
          });
        });
      }
    }(),
  ],
};

3. 效果验证 #

• 编译后，初始Chunk（如main.js）会以main.js?v=12345的形式加载
• 所有动态加载的Chunk（如路由懒加载模块），请求地址也会自动带上?v=12345
• 后续只需修改HTML中的MY_CUSTOM_PARAM值，就能强制浏览器刷新所有Chunk的缓存，无需重新编译代码

优化建议 #

• 如果需要在生产环境动态注入参数，可使用DefinePlugin从环境变量取值：

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'window.MY_CUSTOM_PARAM': JSON.stringify(process.env.BUILD_VERSION || 'default'),
      }),
    ],
  };
  

  然后在HTML模板中直接使用：

  <script>window.MY_CUSTOM_PARAM = <%= window.MY_CUSTOM_PARAM %>;</script>
  

• 不同Webpack版本的Runtime模块代码可能略有差异，若正则替换不生效，可查看编译后的Runtime代码调整替换规则

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