核心

Angular Cli 6 禁用了webpack的自定义配置，官方似乎并未提供自定义配置webpack的方法。

在此之前，可以使用ng eject把默认的webpack提取到代码中，进行自定义。

还好有一个第三方库angular-builders对@angular-devkit/build-angular进行了封装，可以很方便的来扩展Angular的webpack配置

安装依赖

npm i -D @angular-builders/custom-webpacknpm i -D @angular-builders/dev-server

修改angular.json

projects.{project name}.architect.build节点

• builder替换成:@angular-builders/custom-webpack:browser
• options增加

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

  这里面的具体参数配置，可通过一个了解

projects.{project name}.architect.serve节点

• builder替换成:@angular-builders/dev-server:generic

增加 extra-webpack.config.js

这个配置文件，并不需要一个完整的配置对象

这个文件会合并到Angular默认的配置中

module.exports = {    module: {        rules: [{            test: /\.less$/,            use: [{                loader: 'px2rem-loader',                // options here options: { remUnit: 75, remPrecision: 8 } }] }] }, };

以上代码演示了，增加一个自定义loader