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
等等…..