Angular 5项目中如何在Angular CLI构建流程中使用Webpack插件？

Hey there! 既然你用的是Angular 5和官方CLI，想要在不跳出CLI构建流程的前提下添加Webpack插件，其实我们可以借助第三方构建器来扩展webpack配置，完全不用脱离CLI的工作流。下面是具体的实现步骤：

1. 安装适配的自定义构建器依赖 #

Angular 5的CLI本身没有直接暴露webpack配置，所以我们需要用@angular-builders/custom-webpack来扩展它。注意要安装和Angular 5版本匹配的构建器版本，这里选7.x版本最合适：

npm install @angular-builders/custom-webpack@7 --save-dev

2. 创建自定义Webpack配置文件 #

在项目根目录新建一个webpack.extra.js文件，在这里引入并配置你需要的Webpack插件。举个例子，如果你想添加CleanWebpackPlugin来清理构建目录：

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(['dist'])
  ]
};

你可以把上面的插件替换成任何你需要的Webpack插件，记得提前安装对应的插件包哦（比如npm install clean-webpack-plugin@3 --save-dev）。

3. 修改Angular CLI配置文件 #

找到项目根目录的angular-cli.json（Angular 5用的是这个配置文件，不是后续版本的angular.json），修改defaults下的build和serve配置，指定使用我们安装的自定义构建器，并关联刚才创建的webpack配置文件：

"defaults": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.extra.js"
      }
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server"
  }
}

4. 验证插件是否生效 #

运行ng build或者ng serve，观察你的Webpack插件是否正常工作。比如上面的CleanWebpackPlugin会在每次构建前清空dist目录，你可以查看dist目录的变化来确认。

小提示：因为Angular 5是比较老的版本，所有依赖的版本一定要匹配，避免出现兼容性问题。如果遇到报错，可以检查一下@angular-builders/custom-webpack的版本是否和你的Angular CLI版本对应。

内容的提问来源于stack exchange，提问作者raxinaga