Angular CLI：自定义webpack配置

The Angular CLI gives us all sorts of power. One of these powers is the ability to forget about the webpack configuration process. This is great for most applications, but what if you want to add custom webpack functionality? This article looks at how we can achieve just that.

Angular CLI为我们提供了各种功能。 这些功能之一就是能够忘记Webpack配置过程。 这对大多数应用程序来说非常有用，但是如果要添加自定义Webpack功能怎么办？ 本文探讨了如何实现这一目标。

新角度应用 (New Angular Application)

To establish a common base, we’ll create a new Angular application with the Angular CLI:

为了建立通用基础，我们将使用Angular CLI创建一个新的Angular应用程序：

# Install the Angular CLI globally
$ npm i @angular/cli -g

# Create a new Angular project with a name of your choosing && change directory
$ ng new AngularCustomWebpackConfig

> N
> SCSS

$ cd AngularCustomWebpackConfig

# Open this up in VS Code and Serve
$ code . && ng serve

A common dependency to many projects is the date library - moment.js. This includes the ability to work with locales, but, it adds quite a bit to the overall bundle size.

对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。

Thankfully - there’s a webpack plugin which removes unnecessary locales. We’ll be using it in this project.

值得庆幸的是-有一个webpack插件可以删除不必要的语言环境。 我们将在本项目中使用它。

依存关系 (Dependencies)

In order to use a custom webpack config, we’ll need the @angular-builders/custom-webpack dependency. Add it to your project as a devDependency like so:

为了使用自定义的webpack配置，我们需要@angular-builders/custom-webpack依赖项。 将其作为devDependency添加到您的项目中， devDependency所示：

$ npm i @angular-builders/custom-webpack -D

We can then install moment to our project and import this into our project:

然后，我们可以将moment安装到我们的项目中并将其导入到我们的项目中：

$ npm i moment --save

自定义Webpack配置 (Custom webpack Configuration)

We can then create a custom webpack configuration that rips out any locales that we don’t specifically choose to keep.

然后，我们可以创建一个自定义的webpack配置，以删除我们没有特别选择保留的所有语言环境。

Inside of the root of your project, create a new file named custom-webpack.config.js with the following:

在项目根目录内，使用以下命令创建一个名为custom-webpack.config.js的新文件：

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

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

This requires us to install the moment-locales-webpack-plugin:

这需要我们安装moment-locales-webpack-plugin ：

$ npm i moment-locales-webpack-plugin -D

将此添加到angular.json (Adding this to angular.json)

Afterwards, we need to configure angular.json to use this new configuration. Inside of the architect/build object, update the builder from @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser and add the customWebpackConfig key:

之后，我们需要配置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
      }
    }
  }
}

使用ng服务时的自定义Webpack配置 (Custom webpack Configuration When Using ng serve)

This is all we need to do if we only want our final, built, application to use the webpack config. However, if we wanted to test this config while using ng serve, we have one more thing to do.

如果我们只希望最终的内置应用程序使用webpack配置，那么这就是我们需要做的所有事情。 但是，如果我们想在使用ng serve测试此配置，我们还有另一件事要做。

Install the @angular-builders/dev-server custom web server from within npm:

从npm内安装@angular-builders/dev-server定制Web服务器：

$ npm i @angular-builders/dev-server -D

We can then update this inside of serve/builder in the angular.json file:

然后，我们可以在angular.json文件中的serve/builder内部更新它：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server"
}

测验 (Testing)

Let’s check to see whether this works as intended! Head over to app.component.ts and set the locale to fr

让我们检查一下它是否按预期工作！ 转到app.component.ts并将语言环境设置为fr

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

import * as moment from 'moment'

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

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

Then we can display this inside of app.component.html:

然后，我们可以在app.component.html显示它：

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

Great. We’re able to see the current date and time with the fr locale, as we’ve specifically told moment to keep this with the plugin.

大。 我们能够看到当前的日期和时间与fr语言环境，因为我们已经明确地告诉moment保持这一与插件。

Let’s remove this from the custom-webpack.config.js and select a different locale:

让我们从custom-webpack.config.js删除它，然后选择其他语言环境：

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

You’ll need to restart the application with ng serve for the application to update.

您需要使用ng serve重新启动应用程序，以更新应用程序。

The locale has disappeared from the bundle! You’ll also notice that the bundle size is significantly smaller with this extra configuration than without.

语言环境已从捆绑包中消失了！ 您还将注意到，使用这种额外的配置，捆绑包的大小要比不使用捆绑包的情况小得多。

Here’s the results without the configuration:

这是没有配置的结果：

chunk {main} main.js, main.js.map (main) 22.6 kB [initial] [rendered]

Here’s the results with the configuration:

下面是与配置的结果：

chunk {main} main.js, main.js.map (main) 10.2 kB [initial] [rendered]

翻译自: https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config