一、准备好自定义 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