@angular-devkit/build-angular:browser 如何配置自定义webpack

要为 Angular 项目配置自定义的 webpack，可以使用 `@angular-builders/custom-webpack` 包。以下是配置步骤：

1. 安装 `@angular-builders/custom-webpack` 包：`npm install --save-dev @angular-builders/custom-webpack`

2. 在 `angular.json` 文件中找到 `architect.build.builder` 属性，将其值从 `@angular-devkit/build-angular:browser` 改为 `@angular-builders/custom-webpack:browser`。

3. 在 `angular.json` 文件中添加一个名为 `customWebpackConfig` 的属性，该属性应该是一个指向 webpack 配置文件的路径的字符串。

   "customWebpackConfig": {
     "path": "./extra-webpack.config.js"
   }

4. 创建 `extra-webpack.config.js` 文件，并在其中编写自定义的 webpack 配置。例如，以下是一个简单的示例，它添加了一个自定义的 loader：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.custom\.js$/,
           use: [
             'babel-loader',
             {
               loader: 'custom-loader',
               options: {
                 foo: 'bar'
               }
             }
           ]
         }
       ]
     }
   };

5. 运行 `ng build` 命令即可使用自定义的 webpack 配置进行构建。

请注意，如果您使用的是 Angular 9 或更高版本，还需要将 `@angular-builders/custom-webpack` 包的版本更新为 `^9.0.0`。