Angular输出哈希能否改用查询字符串参数而非重命名文件？

首先明确：--outputHashing=all本身不支持直接切换为追加查询字符串的模式，它的设计逻辑就是通过重命名文件（给文件名加哈希）来实现缓存清除——这也是Webpack官方更推荐的方案，因为部分CDN或代理服务器可能会忽略URL中的查询参数，导致缓存策略失效。

如果一定要用?v=hash的方式，有两种简便实现途径：

1. 借助html-webpack-plugin自定义模板 #

如果你的项目已经在用html-webpack-plugin生成HTML，可以通过自定义EJS模板，利用插件提供的哈希值给资源链接追加参数：

首先编写自定义模板文件（比如src/index.ejs）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <% if (htmlWebpackPlugin.files.css.length) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>?v=<%= htmlWebpackPlugin.options.hash %>">
  <% } %>
</head>
<body>
  <div id="app"></div>
  <% htmlWebpackPlugin.files.js.forEach(jsFile => { %>
    <script src="<%= jsFile %>?v=<%= htmlWebpackPlugin.options.hash %>"></script>
  <% }) %>
</body>
</html>

然后在Webpack配置中开启hash选项：

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

module.exports = {
  // ...其他配置项
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      hash: true // 启用全局编译哈希
    })
  ]
};

打包后，HTML里的JS、CSS链接会自动带上?v=xxx格式的哈希参数。

2. 自定义极简Webpack插件 #

如果不用html-webpack-plugin，可以自己写一个轻量插件，在编译完成后修改输出文件中的资源引用：

class AddQueryHashPlugin {
  apply(compiler) {
    // 在编译输出阶段触发逻辑
    compiler.hooks.emit.tapAsync('AddQueryHashPlugin', (compilation, done) => {
      const buildHash = compilation.hash;
      // 遍历所有输出的HTML文件
      Object.keys(compilation.assets).forEach(assetName => {
        if (!assetName.endsWith('.html')) return;
        
        let content = compilation.assets[assetName].source();
        // 给JS和CSS链接追加哈希参数
        content = content.replace(/(<script[^>]+src=")([^"]+)(")/g, `$1$2?v=${buildHash}$3`);
        content = content.replace(/(<link[^>]+href=")([^"]+)(")/g, `$1$2?v=${buildHash}$3`);
        
        // 更新输出内容
        compilation.assets[assetName] = {
          source: () => content,
          size: () => content.length
        };
      });
      done();
    });
  }
}

// 在Webpack配置中注册插件
module.exports = {
  // ...其他配置
  plugins: [new AddQueryHashPlugin()]
};

额外提醒 #

用查询字符串做缓存清除时，要确认你的服务器或CDN不会忽略URL中的查询参数——有些服务会默认忽略这些参数，导致缓存无法正常更新，这也是Webpack官方优先推荐文件名哈希的核心原因。

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