如何配置ng build --prod生成含package.json版本号的输出文件？

步骤1：调整angular.json基础配置 #

找到项目在angular.json里的architect > build > options节点，做两处修改：

• 将outputHashing设为none，关闭框架默认的哈希值生成逻辑
• 替换构建器并添加自定义webpack配置（若未启用过）：把原构建器@angular-devkit/build-angular:browser换成@angular-builders/custom-webpack:browser，同时指定自定义webpack文件路径

示例配置片段：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "outputHashing": "none",
    "customWebpackConfig": {
      "path": "./webpack.custom.config.js"
    },
    // 保留原有其他配置
  }
}

先安装依赖包：npm install @angular-builders/custom-webpack --save-dev

步骤2：编写自定义webpack配置文件 #

在项目根目录创建webpack.custom.config.js，读取package.json中的版本号并修改输出文件名规则：

const packageJson = require('./package.json');
const appVersion = packageJson.version;

module.exports = {
  output: {
    filename: `[name].${appVersion}.js`,
    chunkFilename: `[id].${appVersion}.js`
  }
};

执行构建后，JS文件会自动生成为main.24.02.01.js这类格式（版本号取自package.json）。

步骤3：CSS文件版本号处理（可选） #

如果希望CSS文件也遵循相同命名规则，在webpack.custom.config.js中添加CSS相关的输出配置，或者直接在angular.json的styles节点里指定输出文件名：

"styles": [
  {
    "input": "src/styles.scss",
    "output": `styles.${packageJson.version}.css`
  }
]

步骤4：执行构建命令 #

直接运行ng build --prod（或ng build --configuration production，依项目配置而定），输出文件就会以package.json版本号替代默认哈希值。

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