介绍

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

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

注意： moment.js是处理日期和时间的流行库。但是，当前的项目状态表明，根据您的目标受众，可能还有其他采用现代方法的库可能更适合您的项目。出于减少捆绑包大小的教育目的，本文将继续使用moment.js.

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

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 对设置 Angular 项目有一定的了解。

本教程已通过 Angular v10.2.0、@angular-builders/custom-webpackv10.0.1、moment.jsv2.29.1 和moment-locales-webpack-pluginv1.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

此时，你应该有角CLI，产生一个角项目moment.js，moment-locales-webpack-plugin和@angular-builders/custom-webpack。

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

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

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

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：

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

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

运行应用程序：

npm start

并在浏览器中打开它：

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

Unmodified Webpack Output
chunk {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文件并添加以下代码行；

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键值：

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

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

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

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

"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 Output
chunk {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 Output
chunk {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 主题页面以获取练习和编程项目。