本篇文章通過案例介紹一下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來說