Angular6 扩展 webpack 配置

核心

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

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

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

https://github.com/meltedspark/angular-builders

安装依赖

npm i -D @angular-builders/custom-webpack
npm 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