如何在AngularCLI构建器中使用自定义webpack配置

介绍

Angular CLI 可以创建一个新的 Angular 项目，它将处理 webpack 配置。但是，在某些情况下，您需要添加自定义 webpack 功能。

出于本文的目的，您将学习如何使用 moment.js 库并删除未使用的语言环境以创建更小的包大小。

笔记： moment.js is a popular library for handling date and time. However, the 当前项目状态 suggests that there may be other libraries with modern approaches that may suit your project better depending on your target audience. For educational purposes in reducing bundle sizes, this article will continue to use moment.js.

在本文中，您将采用现有的 Angular CLI 生成的项目并使用 @angular-builders/custom-webpack 进行自定义 webpack 配置。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
熟悉设置 Angular 项目。

本教程已使用 Angular v10.2.0、@angular-builders/custom-webpack v10.0.1、moment.js v2.29.1 和 moment-locales-webpack-plugin v1.2.0 进行了验证。

第 1 步 — 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中，使用以下命令：

npx @angular/cli new AngularCustomWebpackConfig --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目，其样式设置为“CSS”（与“Sass”、“Less”或“Stylus”相对）、无路由和跳过测试。

导航到新创建的项目目录：

cd AngularCustomWebpackConfig

然后，您可以将 moment.js 安装到您的项目中并将其导入您的项目中：

npm install moment@2.29.1

要减小 moment.js 库的大小，您还需要将 moment-locales-webpack-plugin 添加为 devDependency：

npm install --save-dev moment-locales-webpack-plugin@1.2.0

为了使用自定义 webpack 配置，您需要将 @angular-builders/custom-webpack 和 @angular-builders/dev-server 作为 devDependency 包添加到您的项目中：

npm install --save-dev @angular-builders/custom-webpack@10.0.1

此时，您应该有一个由 Angular CLI 生成的 Angular 项目，moment.js、moment-locales-webpack-plugin 和 @angular-builders/custom-webpack。

第 2 步 — 构建本地化时钟显示

本文的示例项目将以法语显示日期和时间信息。

在代码编辑器中打开 app.component.ts 并导入 moment 并使用它以月份名称、月份日期、年份和时间的格式显示当前时间（[X166X ]) 使用法语 (fr) 语言环境：

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';

import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentTimeFRLocale: string;

  ngOnInit(): void {
    moment.locale('fr');
    this.currentTimeFRLocale = moment().format('LLL');
  }
}

然后，在代码编辑器中打开 app.component.html 并使用 currentTimeFRLocale：

src/app/app.component.html

<h1>{{ currentTimeFRLocale }}</h1>

此代码将显示日期和时间字符串。

运行应用程序：

npm start

并在浏览器中打开它：

一旦您确认您的应用程序按预期工作，请记下控制台中 main.js 和 vendor.js 的值；

Unmodified Webpack Outputchunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]
...
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

包含 moment.js 的供应商文件大小为 3.04 MB。

第 3 步 — 使用自定义 webpack 配置修改本地化时钟显示

moment.js 默认支持多种语言环境。如果您的项目的受众不需要某些语言，则删除不需要的语言环境有助于减小文件大小。反过来，较小的文件大小将使您的应用程序为最终用户更快地加载。

使用您的代码编辑器，创建一个新的 custom-webpack.config.js 文件并添加以下代码行；

自定义 webkpack.config.js

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['fr']
    })
  ]
};

这将需要 moment-locales-webpack-plugin 并使用它来保持 fr 区域设置 - 这将是法语中的日期和时间术语。

接下来，您需要修改 angular.json 以使用此新配置。

在代码编辑器中打开 angular.json。在 architect/build 对象内部，将 builder 从 @angular-devkit/build-angular:browser 更新为 @angular-builders/custom-webpack:browser 并添加 customWebpackConfig 键：

角.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js",
        "replaceDuplicatePlugins": true
      },
      // ...
    },
    // ...
  },
  // ...
}

这将使用自定义 webpack 配置构建应用程序。

在本地开发时，您还需要应用自定义 webpack 配置。

在代码编辑器中重新访问 angular.json。在 architect/serve 对象内部，将 builder 从 @angular-devkit/build-angular:dev-server 更新为 @angular-builders/custom-webpack:dev-server：

角.json

"architect": {
  // ...
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "AngularCustomWebpackConfig:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "AngularCustomWebpackConfig:build:production"
      }
    }
  },
  // ...
}

此时，您的应用程序知道使用 @angular-builders/custom-webpack 而不是 @angular-devkit/build-angular 以及在哪里查找自定义 webpack 配置。

注意：以前需要@angular-builders/dev-server包。但是，从版本 8 开始，它已被弃用，应使用 @angular-builders/custom-webpack:dev-server 代替。

运行应用程序：

npm start

一旦您确认您的应用程序按预期工作，请记下控制台中 main.js 和 vendor.js 的值。

回顾一下，未修改的 webpack 配置生成了 main.js 和 vendor.js ，文件大小如下：

Unmodified Webpack Outputchunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]
...
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

现在，通过自定义的 webpack 配置，main.js 和 vendor.js 文件的大小已经减小：

Custom Webpack Outputchunk {main} main.js, main.js.map (main) 9.91 kB [initial] [rendered]
...
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.55 MB [initial] [rendered]

这分别是 5 kB 和 490 kB 的差异。

结论

在本文中，您学习了如何使用 @angular-builders/custom-webpack 来使用自定义 webpack 配置。与使用 Angular CLI 生成的默认设置相比，使用自定义 webpack 配置可以让您更好地控制项目。

如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。