如何自定义Angular CLI中的Webpack和loader配置？

本文共计1987个文字，预计阅读时间需要8分钟。

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

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

1.1 背景

使用Angular CLI新建工程后，默认使用的是Angular官方提供的Webpack配置。但在某些情况下，我们可能需要根据项目需求进行自定义配置，例如添加特定的loader、插件等。以下是如何在Angular CLI下自定义Webpack配置的方法。

1.2 使用Angular CLI新建工程后，一键ng serve启动项目

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

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

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

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配置。