本篇文章通過(guò)案例介紹一下Angular CLI下的自定義Webpack配置方法和自定義loader處理的方法，希望對(duì)大家有所幫助！

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

1.1 背景

使用Angular CLI新建工程后，一鍵式的配置已經(jīng)能滿足大部分需求，但針對(duì)個(gè)體述求，可能會(huì)希望給webpack配置一些額外的loader或者plugins。【相關(guān)教程推薦：《angular教程》】

1.2 替換Builder實(shí)現(xiàn)外部配置webpack

angular.json 暴露了多種Builder可以替換的接口，如果需要使用自定義webpack配置可以替換一下builder。 @angular-builders/custom-webpack和 ngx-build-plus都提供了對(duì)應(yīng)的builder，查看npm的趨勢(shì)custom-webpack用戶比較多，這里以custom-webpack為例，介紹如何修改angular.json以用上自定義的webpack配置。

1.3 安裝Builder的包

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

npm install @angular-builders/custom-webpack

不同的ng版本需要安裝對(duì)應(yīng)不同的版本的包， ng的大部分庫(kù)目前有一個(gè)約定俗成的好習(xí)慣，就是主版本號(hào)和ng的主版本號(hào)是能夠?qū)ι系摹１热缡褂玫氖莕g12，那就用custom-webpack@12的版本。那么為什么需要這么多版本，原因是ng在自己的不同版本下的默認(rèn)使用的@angular-devkit/build-angular包的內(nèi)容和結(jié)構(gòu)甚至schema結(jié)構(gòu)和位置可能會(huì)發(fā)生變化。對(duì)于custom-webpack來(lái)說(shuō)