如何配置outputHashing将资源哈希放入URL查询参数而非文件名

你当前配置的outputHashing: "all"是Angular CLI内置规则，会自动将内容哈希嵌入输出文件名结构，要实现styles.css?[hash]的引用效果，需要从两个层面调整构建配置：

• 移除文件名中的哈希占位符
  通过自定义Webpack构建器覆盖默认输出规则，把所有类型资源的命名模板从带哈希的格式改为纯文件名格式，删除模板中原有的内容哈希占位符：

  // 覆盖Webpack输出配置示例
  module.exports = {
    output: {
      // 原默认格式 [name].[contenthash].js
      filename: '[name].js',
      // 原默认格式 [name].[contenthash].chunk.js
      chunkFilename: '[name].chunk.js',
      // 原默认格式 [name].[hash][ext]
      assetModuleFilename: '[name][ext]'
    }
  }
  

  调整后构建产出的物理文件不再内嵌哈希，磁盘上的实际文件就是纯文件名格式，比如styles.css而非带哈希后缀的styles.1e072cee432cd678e43c.css。
• 自动为资源引用拼接哈希查询参数
  借助Webpack插件的资源URL生成钩子，在HTML注入外链、生成懒加载资源路径的环节，计算对应文件的内容哈希，自动追加到URL的查询位置，将原本指向styles.css的引用改写为styles.css?1e072cee432cd678e43c。

注意：这种调整不会损失强缓存的能力——只要资源内容发生变化，对应的查询参数值就会同步更新，依然能触发浏览器重新拉取最新资源，和内嵌哈希的缓存效果完全一致。

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