Angular：如何在Angular(8.0)中配置Webpack

•

在文章【Angular：如何用Angular(<6.0)和Webpack搭建項目】中介紹了若是在angular項目中想要本身配置webpack，那麼必須用命令‘ng eject’把angular內置的webpack.config文件暴露出來，而後根據項目需求本身重寫整個webpack.config文件。webpack

可是angular6.0以上的版本，angular官方去掉‘ng eject’這個命令。那麼angular6.0+項目中，想要根據項目需求添加或者更改webpack打包配置要怎麼作呢？【angular-builders】這個lib就是專門用來解決沒有’ng eject’後怎麼客戶化配置項目的webpack打包方式。這篇文章會詳細介紹在angular8.0中如何用【angular-builders】客戶化配置webpack。git

本文中用的項目代碼在這裏：【angular-performance】github

用angular-cli建立一個angular8項目

‘ng new angular-performance’建立angular項目。web

本地開發環境以下：typescript

安裝angular-builders

運行命令：npm

 
   npm install @angular-builders/custom-webpack --save-dev
npm install @angular-devkit/build-angular --save-dev

不須要單獨安裝webpack和webpack-dev-server，由於這兩個是@angular-devkit/build-angular的依賴包，在安裝@angular-devkit/build-angular會自動安裝webpack和webpack-dev-server。json

須要注意的是，就算在初始化的package.json中已經有@angular-devkit/build-angular，仍是須要手動再運行一次命令行：webpack-dev-server

npm install @angular-devkit/build-angular --save-dev

不然在ng serve運行項目的時候，可能會看到相似下面的錯誤：post

 
   14% building modules......
Error: No module factory available for dependency type: ContextElementDependency
...... 
  

該錯誤代表本地有多個版本的webpack，把package.json文件裏的webpack去掉，單獨再安裝@angular-devkit/build-angular就能夠了。性能

更改angular.json中的配置

由於咱們想要，在用angular-cli的前提下，能夠把咱們本身新加的客戶化webpack配置加進去，能夠實現效果：

運行命令行ng server或者ng build的時候，能夠結合已有內置webpack配置和新加的客戶化webpack配置進行打包編譯。

因此須要更改angular.json中的配置，好比咱們須要把客戶化的webpack配置，加在運行（serve）和編譯（build）命令裏，那麼關鍵的配置以下：

 ...... "architect": { ...... "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./webpack.config.js" } } }, "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "customWebpackConfig": { "path": "./webpack.config.js" } } } } 大專欄  Angular：如何在Angular(8.0)中配置Webpackn>

若是unit test也須要加本身的客戶化webpack配置，能夠加在對應test那個節點下。

customWebpackConfig節點下的path就是指的咱們須要新加的客戶化webpack配置文件，而後再項目根目錄下新加一個新的webpack.config.js文件，把項目裏須要新加的一些webpack配置加在這個文件裏就能夠了。好比在示例項目里加了copy-webpack-plugin在編譯過程當中拷貝文件和webpack-bundle-analyzer用來編譯打包好之後分析每一個bundle文件內容，代碼以下：

 
   const webpack = require('webpack');
const pkg = require('./package.json');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = (config, options) => {
  config.plugins.push(
    new webpack.DefinePlugin({
      'APP_VERSION': JSON.stringify(pkg.version),
    }),
    new BundleAnalyzerPlugin(),
    new CopyPlugin([
      { from: path.join(__dirname, "moackdata"), to: path.join(__dirname, "dist/angular-performance/moackdata") }
    ])
  );

  return config;
}; 
  

新加的客戶化webpack文件不必定要命名爲webpack.config.js，能夠隨意命名。並且能夠在serve/build/test命令裏添加各自不一樣的webpack配置文件，知足開發/發佈/測試不一樣的配置需求。

在作好以上的配置之後，運行ng serve或者ng build能夠看到運行的結果是合併了angular內置webpack和咱們新加的客戶化webpack配置。

這麼配置的優點是什麼？

angular-cli內置的webpack配置，咱們經過ng build --aot=true 或者ng build --prod能夠作AoT編譯和tree-shaking，從而能夠優化整個angular應用的性能。

由於內置webpack配置，開發沒辦法根據實際項目需求加一些內置webpack沒有的loader或者plugin，在angular6.0之前的版本都是經過ng eject把內置webpack暴露出來，大多數開發根據本身項目需求重寫整個webpack配置，那麼同時也須要花額外的精力配合webpack去實現angular AoT編譯和tree-shaking功能。

在angular6.0以上的版本，去掉ng eject，保留angular-cli（AoT編譯和tree-shaking），並經過【angular-builders】知足開發客戶化webpack配置需求。這麼作的優點有：

開發人員能夠用最少的時間和精力，同時兼顧性能（AoT/tree-shaking）和項目特殊loader/plugin需求。
不須要額外用awesome-typescript-loader來編譯typescript
不須要額外用angular-router-loader來實現lazy loading
默認是Production mode
默認是Minification
默認是Uglification
等等…..