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