如何在 Angular CLI 创建的项目中自定义 webpack 配置

一、准备好自定义 webpack 配置

首先准备好自定义 webpack 配置放到项目目录下。比如我想要使用 devServer.before 来处理 api mock，可以在项目目录下创建一个 config/webpack.config.js 文件，自定义 webpack 配置如下：

module.exports = {
  devServer: {
    before: function(app) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    },
  },
};

二、安装 @angular-builders/custom-webpack 依赖

$ npm i -D @angular-builders/custom-webpack

三、修改 angular.json

将对应的 builder 修改为 @angular-builders/custom-webpack。如下，在 serve 中修改：

"builder": "@angular-builders/custom-webpack:dev-server"

在其他 [architect-target] 中同理，然后在 options 中增加 customWebpackConfig：

"customWebpackConfig": {
  "path": "./extra-webpack.config.js",
  "mergeStrategies": {
      "loaders": "append"
  }
}

这样，自定义 webpack 配置就生效了。我们可以通过 ng serve 启动项目，看一下模拟接口 /some/path 是否已经生效。

文中使用的工具或者包的版本：
Angular CLI 11.0.6、@angular-builders/custom-webpack 11.0.0