如何将Webpack构建哈希值注入到应用代码中

我明白你的痛点——想用Webpack的[hash]做缓存清除，但硬编码的本地化文件路径因为hash变化找不到正确文件，还没法直接在配置里拿到这个hash值注入到代码里。其实问题出在Webpack的[hash]是编译阶段才生成的，配置初始化的时候它还不存在，所以得借助Webpack的compiler钩子来动态获取并更新DefinePlugin的配置。

给你一个实用的解决方案，直接上代码：

const webpack = require('webpack');

// 先创建一个带占位符的DefinePlugin实例
const definePlugin = new webpack.DefinePlugin({
  HASH: JSON.stringify('') // 先填个空字符串当占位
});

module.exports = (env) => {
  return {
    entry: 'app/main.js',
    output: {
      filename: '[name].[hash].js'
    },
    plugins: [
      definePlugin,
      // 自定义一个小插件来监听编译完成事件，获取hash并更新DefinePlugin
      {
        apply: (compiler) => {
          // 监听done钩子，编译完成后就能拿到最终的hash了
          compiler.hooks.done.tap('HashInjectPlugin', (stats) => {
            const currentHash = stats.hash;
            // 把HASH替换成实际的编译hash，记得用JSON.stringify转成字符串格式
            definePlugin.definitions.HASH = JSON.stringify(currentHash);
          });
        }
      }
    ]
  };
};

原理说明： #

• 先初始化一个DefinePlugin，给HASH变量设个占位值，不然Webpack会报错
• 自定义插件监听Webpack的done钩子：这个钩子会在整个编译流程完成后触发，此时stats.hash就是本次编译生成的完整hash值
• 拿到hash后，直接修改DefinePlugin的definitions对象，把HASH的值替换成实际的hash字符串（必须用JSON.stringify，因为DefinePlugin会把值直接注入到代码里，字符串需要带引号）

之后你在业务代码里就可以直接用HASH变量拼路径了：

// 比如加载本地化文件
const enLocalePath = `/assets/locales/${HASH}/en.json`;
fetch(enLocalePath)
  .then(res => res.json())
  .then(data => { /* 处理本地化数据 */ });

这个方法兼容Webpack 4和5，每次编译hash更新后，DefinePlugin都会自动同步最新的值，完全不用手动干预。

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