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