简介
Angular CLI可以创建一个新的Angular项目，它将处理webpack配置。但是，在某些情况下，您需要添加自定义webpack功能。
出于本文的目的，您将学习如何使用oment.js库并删除未使用的区域设置以创建更小的包大小。
<$>[备注]
注意： moment.js是处理日期和时间的热门类库。然而，当前项目status]建议，根据目标受众的不同，可能会有其他具有现代方法的库更适合您的项目。出于缩小包大小的教育目的，本文将继续使用oment.js。
<$>
在本文中，您将使用一个已有的角度命令行工具生成的项目，并使用@角度构建器/定制-WebPack进行webpack的自定义配置。
预约
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
- 对设置角度project.》有所了解
本教程已通过Angular v10.2.0、@angular-builders/custom-webpack v10.0.1、moment.js v2.29.1和moment-locales-webpack-plugin v1.2.0验证。
第一步-设置项目
您可以使用@ANGLE/CLI创建一个新的角度投影。
在您的终端窗口中，使用以下命令：
1npx @angular/cli new AngularCustomWebpackConfig --style=css --routing=false --skip-tests
这将配置一个新的角度项目，将样式设置为)，不布线，并跳过测试。
导航到新创建的项目目录：
1cd AngularCustomWebpackConfig
然后，您可以在您的工程中安装oment.js并将其导入到您的工程中：
1npm install [email protected]
为了减小oment.js库的大小，您还需要添加Moment-Locales-webpack-plugin作为devDependency：
1npm install --save-dev [email protected]
为了使用自定义的webpack配置，您需要在您的工程中添加@角度构建者/定制-WebPack和@角度构建者/dev-server作为devDependency包：
1npm install --save-dev @angular-builders/[email protected]
此时，您应该已经有了一个角度项目，该项目由角度命令行界面、Moment.js、Moment-Locales-webpack-plugin和@角度构建器/定制-WebPack生成。
第二步-构建本地化时钟展示
本文的示例项目将以法语显示日期和时间信息。
在您的代码编辑器中打开app.Component.ts，导入oment，并使用它以法语(fr)区域设置以月份名称、日期、年份和时间(LLL)的格式显示当前时间：
1[label src/app/app.component.ts]
2import { Component, OnInit } from '@angular/core';
3
4import * as moment from 'moment';
5
6@Component({
7 selector: 'app-root',
8 templateUrl: './app.component.html',
9 styleUrls: ['./app.component.css']
10})
11export class AppComponent implements OnInit {
12 currentTimeFRLocale: string;
13
14 ngOnInit(): void {
15 moment.locale('fr');
16 this.currentTimeFRLocale = moment().format('LLL');
17 }
18}
然后，在您的代码编辑器中打开app.Component.html，使用CurrentTimeFRLocale：
1[label src/app/app.component.html]
2<h1>{{ currentTimeFRLocale }}</h1>
此代码将显示日期和时间字符串。
运行应用程序：
1npm start
并在浏览器中打开它：
验证应用程序运行正常后，在控制台记录main.js和vendor.js的值；
1[secondary_label Unmodified Webpack Output]
2chunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]
3...
4chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]
供应商文件包含Moment.js，大小为3.04 MB。
第三步-使用webpack自定义配置修改本地化时钟显示
Moment.js默认支持多种语言环境。如果项目的受众不需要某些语言，则删除不必要的区域设置有助于减小文件大小。较小的文件大小反过来会让最终用户更快地加载您的应用程序。
使用您的代码编辑器，创建一个新的Custom-webpack.config.js文件，并添加以下代码行；
1[label custom-webkpack.config.js]
2const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
3
4module.exports = {
5 plugins: [
6 new MomentLocalesPlugin({
7 localesToKeep: ['fr']
8 })
9 ]
10};
这将需要Moment-Locales-webpack-plugin‘并使用它来保留fr`区域设置--这将是法语中的日期和时间术语。
接下来，您需要修改angular.json以使用这个新配置。
在代码编辑器中打开angular.json。在Architect/Build对象内部，将Builder从@angular-devkit/Build-Angular：Browser更新为@angular-Builders/Customer-webpack：Browser，并添加CustomWebPackConfig键：
1[label angular.json]
2"architect": {
3 "build": {
4 "builder": "@angular-builders/custom-webpack:browser",
5 "options": {
6 "customWebpackConfig": {
7 "path": "./custom-webpack.config.js",
8 "replaceDuplicatePlugins": true
9 },
10 // ...
11 },
12 // ...
13 },
14 // ...
15}
这将使用定制的webpack配置构建应用程序。
在本地开发时，您还需要应用定制的webpack配置。
在代码编辑器中重新访问angular.json。在Architect/Serve对象的内部，将Builder从@Angel-Devkit/Build-Angel：dev-server更新为@angular-builders/custom-webpack:dev-server：
1[label angular.json]
2"architect": {
3 // ...
4 "serve": {
5 "builder": "@angular-builders/custom-webpack:dev-server",
6 "options": {
7 "browserTarget": "AngularCustomWebpackConfig:build"
8 },
9 "configurations": {
10 "production": {
11 "browserTarget": "AngularCustomWebpackConfig:build:production"
12 }
13 }
14 },
15 // ...
16}
至此，您的应用程序已经知道了应该使用@Angel-Builders/Custom-WebPack，而不是@Angel-Devkit/Build-angular，也知道在哪里可以找到定制的webpack配置。
<$>[注]
注意： 以前需要@angular-builders/dev-server包。然而，自版本8以来，它已被弃用，应该使用@angular-builders/custom-webpack：dev-server。
<$>
运行应用程序：
1npm start
验证应用程序运行正常后，请注意控制台中main.js和vendor.js的值。
回过头来看，未修改的webpack配置生成的main.js和vendor.js文件大小如下：
1[secondary_label Unmodified Webpack Output]
2chunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]
3...
4chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]
现在，通过自定义的webpack配置，main.js和vendor.js文件的大小已经减小：
1[secondary_label Custom Webpack Output]
2chunk {main} main.js, main.js.map (main) 9.91 kB [initial] [rendered]
3...
4chunk {vendor} vendor.js, vendor.js.map (vendor) 2.55 MB [initial] [rendered]
这分别是5kB和490kB的差异。
结论
在本文中，你学习了如何使用@angular-builders/custom-webpack来使用自定义webpack配置。使用自定义webpack配置可以为您提供比Angular CLI生成的默认值更大的项目控制权。
如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。