本篇文章通过案例介绍一下Angular CLI下的自定义Webpack配置方法和自定义loader处理的方法，希望对大家有所帮助！

1 Angular 使用自定义Webpack配置方法

1.1 背景

使用Angular CLI新建工程后，一键式的配置已经能满足大部分需求，但针对个体述求，可能会希望给webpack配置一些额外的loader或者plugins。【相关教程推荐：《angular教程》】

1.2 替换Builder实现外部配置webpack

angular.json 暴露了多种Builder可以替换的接口，如果需要使用自定义webpack配置可以替换一下builder。 @angular-builders/custom-webpack和 ngx-build-plus都提供了对应的builder，查看npm的趋势custom-webpack用户比较多，这里以custom-webpack为例，介绍如何修改angular.json以用上自定义的webpack配置。

1.3 安装Builder的包

由于@angular-builders/custom-webpack并不是ng官方的包，所以使用前都需要先安装一下：

npm install @angular-builders/custom-webpack

不同的ng版本需要安装对应不同的版本的包， ng的大部分库目前有一个约定俗成的好习惯，就是主版本号和ng的主版本号是能够对上的。比如使用的是ng12，那就用custom-webpack@12的版本。那么为什么需要这么多版本，原因是ng在自己的不同版本下的默认使用的@angular-devkit/build-angular包的内容和结构甚至schema结构和位置可能会发生变化。对于custom-webpack来说