Angular项目：如何让不同构建命令生成不同哈希的JS文件？

要让SSR和CSR构建生成的文件拥有不同的文件名（避免缓存重叠），可以通过Angular的多配置结合webpack自定义输出规则来实现，以下是具体可行方案：

方法一：创建差异化构建配置并自定义文件名前缀 #

1. 在angular.json中新增SSR/CSR专属构建配置
   找到projects -> [你的项目名] -> architect -> build -> configurations节点，添加两个独立配置：

   "production-csr": {
     "extends": "production",
     "outputHashing": "all",
     "extraWebpackConfig": "./webpack.csr.config.js"
   },
   "production-ssr": {
     "extends": "production",
     "outputHashing": "all",
     "extraWebpackConfig": "./webpack.ssr.config.js"
   }
   

2. 编写对应webpack配置文件
   在项目根目录创建webpack.csr.config.js：

   module.exports = {
     output: {
       filename: '[name]-csr.[contenthash].js',
       chunkFilename: '[id]-csr.[contenthash].chunk.js'
     }
   };
   

   再创建webpack.ssr.config.js：

   module.exports = {
     output: {
       filename: '[name]-ssr.[contenthash].js',
       chunkFilename: '[id]-ssr.[contenthash].chunk.js'
     }
   };
   

3. 更新package.json中的构建命令
   将原有命令替换为：

   "build:csr": "ng build --configuration=production-csr --output-path=dist/csr",
   "build:ssr": "ng build --configuration=production-ssr --output-path=dist/ssr"
   

   构建完成后，JS文件会分别带上csr-和ssr-前缀，配合内容哈希彻底避免缓存冲突。

方法二：修改哈希生成种子（进阶无前缀方案） #

如果不想添加文件名前缀，可通过修改webpack哈希生成种子，让相同内容的文件在不同配置下生成不同哈希：
在webpack.csr.config.js中添加：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.HashedModuleIdsPlugin({
      seed: 'csr-build'
    })
  ]
};

webpack.ssr.config.js中将seed值改为ssr-build即可。这种方式会让文件名的哈希部分差异化，同样能区分两种构建产物。

注意事项 #

• Angular 8及以上版本均支持extraWebpackConfig配置项
• 若使用Angular Universal做SSR，需同步调整服务端构建配置，避免加载错误的客户端资源

内容的提问来源于stack exchange，提问作者O. Shekriladze