Angular 9中如何配置webpack output.devtoolNamespace并合并自定义配置

要在Angular 9中实现自定义devtoolNamespace且不覆盖默认的output配置，你可以借助自定义webpack构建器来修改现有配置，而不用从头定义整个output对象。具体步骤如下：

1. 安装自定义webpack构建工具 #

首先需要安装@angular-builders/custom-webpack，它允许我们扩展Angular CLI的webpack配置：

npm install --save-dev @angular-builders/custom-webpack
# 或者用yarn
yarn add -D @angular-builders/custom-webpack

2. 修改angular.json配置 #

找到你项目的build和serve配置项，将默认的builder替换为自定义webpack的builder，并指定自定义配置文件的路径：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.custom.js"
            },
            // 保留其他原有build配置...
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.custom.js"
            },
            // 保留其他原有serve配置...
          }
        }
      }
    }
  }
}

3. 创建自定义webpack配置文件 #

在项目根目录创建webpack.custom.js，通过函数形式的配置直接修改Angular生成的原始webpack配置，只添加devtoolNamespace属性，保留output的其他默认设置：

module.exports = (config, options) => {
  // 仅修改output中的devtoolNamespace，不替换整个output对象
  config.output.devtoolNamespace = "web-component-a"; // 替换为你需要的命名空间
  return config;
};

关键说明 #

• 函数形式的配置会接收Angular CLI自动生成的原始webpackconfig对象，我们可以直接修改其中的属性，这样就不会覆盖output里的其他默认配置（比如filename、chunkFilename等）。
• 如果需要为不同的组件设置不同的命名空间，只需为每个组件项目单独创建对应的webpack.custom.js并修改devtoolNamespace值即可。

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