Angular10配置webpack打包 「详细教程」

对于 Angular 项目，推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。 但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。

一、ngx-build-plus 建立额外配置

这里推荐一个工具库ngx-build-plus，不需要改很多东西就能在现有项目进行集成。接下来教大家如何使用，具体详情可以去github上找文档。虽然官方文档上只标注到了可用版本为9，但是Angular10也是可以使用的。

1. 使用CLI创建一个新的Angular项目

从零搭建Angular10项目

先决条件

在开始之前，请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。

Node.js

Angular 需要 Node.js 的 8.x 或 10.x 版本。

• 要想检查你的版本，请在终端/控制台窗口中运行 node -v 命令。
  

2. 添加ngx-build-plus： ng add ngx-build-plus

npm 包管理器

Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能，它们都是 npm 包。要下载和安装 npm 包，你必须拥有一个 npm 包管理器。

本 “快速上手” 中使用的是 yarn 客户端命令行界面，管理依赖包

要想检查你是否已经安装了 yarn 客户端，请在终端/控制台窗口中运行 yarn -v 命令。

第一步：安装 Angular CLI

你要使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。

全局安装 Angular CLI。

要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令：

yarn global add @angular/cli

• 1

要想检查你是否已经安装了 angular/cli，请在终端/控制台窗口中运行 ng --version` 命令。

第二步：创建工作区和初始应用

Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端（e2e）测试构成的文件。

要想创建工作区和初始应用项目：

1. 运行 CLI 命令 ng new，并提供一个名字 my-app，如下所示：

   ng new my-app

2. ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。

Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。

还将创建下列工作区和初始项目文件：

• 一个新的工作区，根目录名叫 my-app

• 一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）

• 一个端到端测试项目（位于 e2e 子目录下）

• 相关的配置文件

初始的应用项目是一个简单的 “欢迎” 应用，随时可以运行它。

ng new命令后面有很多选项，详见https://angular.cn/cli/new，由于我们的项目大多使用less编写样式因此需要添加后缀--style less，代表项目中默认使用less，用于样式文件的文件扩展名或预处理程序。

完整命令：ng new my-app --style less

第三步：启动开发服务器

Angular 包含一个开发服务器，以便你能轻易地在本地构建应用和启动开发服务器。

1. 进入工作区目录（my-app）。

2. 使用 CLI 命令 ng serve 启动开发服务器，并带上 --open 选项。

ng serve --open

• 1

ng serve 命令会自动启动服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。

--open（或只用 -o）选项会自动打开浏览器，并访问 http://localhost:4200/。

第四步：编辑你的第一个 Angular 组件

组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。

作为初始应用的一部分，CLI 也会为你创建第一个 Angular 组件。它就是根组件，名叫 app-root。

1. 打开 ./src/app/app.component.ts。
   

2. 把 title 属性从 'my-app' 修改成 'My First Angular App'。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']})export class AppComponent {
  title = 'My First Angular App!';}

浏览器将会用修改过的标题自动刷新。

打开 ./src/app/app.component.less 并给这个组件提供一些样式。

src/app/app.component.less

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;}

工作区配置文件

每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。

应用项目文件

CLI 命令 ng new my-app 会默认创建名为 “my-app” 的工作空间文件夹，并在 src/ 文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。

当工作空间文件结构到位时，可以在命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用（除非你在创建其它应用之后更改了默认值）。

除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。

对于单应用的工作区，工作空间的 src/ 子文件夹包含根应用的源文件（应用逻辑、数据和静态资源）。对于多项目的工作空间，projects/ 文件夹中的其它项目各自包含一个具有相同结构的 project-name/src/ 子目录。

应用源文件

顶层文件 src/ 为测试并运行你的应用提供支持。其子文件夹中包含应用源代码和应用的专属配置。

If you create an application using Angular’s strict mode, you will also have an additional package.json file in the src/app directory. For more information, see Strict mode.

在 src/ 文件夹里面，app/ 文件夹中包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。

应用配置文件

根应用的配置文件位于工作空间的根目录下。对于多项目工作空间，项目专属的配置文件位于项目根目录 projects/project-name/。

项目专属的 TypeScript 配置文件继承自工作区范围内的 tsconfig.base.json，而项目专属的 TSLint 配置文件则继承自全工作区级内的 tslint.json。

端到端测试文件（基本用不到）

根级的 e2e/ 文件夹中包含一组针对根应用的端到端测试的源文件，以及测试专属的配置文件。

对于多项目的工作空间，应用专属的端到端测试文件都位于项目各自的根目录下，即 projects/project-name/e2e/。

e2e/
   src/                 (end-to-end tests for my-app)
      app.e2e-spec.ts
      app.po.ts
    protractor.conf.js  (test-tool config)
    tsconfig.json       (TypeScript config inherits from workspace)

2. 添加ngx-build-plus： ng add ngx-build-plus

注意：如果要将其添加到projects文件夹中的特定子项目，请使用--project开关指向它：ng add ngx-build-plus --project getting-started

备注：这一步通过NPM安装包，在Angular >= 7 and CLI >= 7版本中，让您的项目使用自定义生成器的更新您的angular.jsonng serve和ng build。但是6版本中可能会出现安装不成功，这时候请直接yarn add ngx-build-plus --dev，然后angular.json文件中更改以下两处地方:

 "build": {    - "builder": "@angular-devkit/build-angular:browser"    + "builder": "ngx-build-plus:build"    ...  },  "serve": {   - "builder": "@angular-devkit/build-angular:dev-server"    + "builder": "ngx-build-plus:dev-server"    ...  } 复制代码

3. 创建文件webpack.partial.js并添加到（子）项目的根目录：

  const webpack = require('webpack');      module.exports = {       plugins: [           new webpack.DefinePlugin({               "VERSION": JSON.stringify("4711")           })       ]   } 复制代码

4. 在您的 app.component.ts中使用全局变量VERSION：

  import { Component } from '@angular/core';      declare const VERSION: string;      @Component({       selector: 'app-root',       templateUrl: './app.component.html',       styleUrls: ['./app.component.css']   })   export class AppComponent {       title = 'Version: ' + VERSION;   } 复制代码

5. 使用--extra-webpack-config指向部分Webpack配置的开关启动应用程序：

ng serve --extra-webpack-config webpack.partial.js -o 复制代码

如果您的项目是基于CLI的子项目，请也使用该--project开关：

ng serve --project getting-started -o --extra-webpack-config webpack.partial.js 复制代码

提示：考虑为此命令创建一个npm脚本。

6. 确保显示了您的webpack配置所提供的版本。

有打印结果显示就表示你的项目已经启用了webpack.partial.js文件中的配置，下面就是在webpack.partial.js中补充我们需要的功能了，笔者主要集中在了两大块。

1. 添加BundleAnalyzerPlugin，分析打包文件

2. 第三方库模块分离 - optimization + splitChunks，分割较大的文件

下面分别描述

二、webpack-bundle-analyzer 打包文件分析工具

1.安装

$ yarn add  webpack-bundle-analyzer --dev 复制代码

2.配置

在webpack.partial.js中的module.exports = webpackConfig这句话的上面增加

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = {   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     })   ] } 复制代码

3.运行

启动服务：

生产环境查看：npm run build --report 或 正常build 即可启动查看器

开发环境查看：webpack -p --progress 或启动正常devServer服务即可启动查看器!

4.结果

5.该插件默认配置

new BundleAnalyzerPlugin({       // openAnalyzer: true,       // reportFilename: path.join(__dirname, 'report.html')       //  可以是`server`，`static`或`disabled`。       //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。       //  在“静态”模式下，会生成带有报告的单个HTML文件。       //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。       analyzerMode: 'static',       //  将在“服务器”模式下使用的主机启动HTTP服务器。       // analyzerHost: '127.0.0.1',       //  将在“服务器”模式下使用的端口启动HTTP服务器。       // analyzerPort: 8888,       //  路径捆绑，将在`static`模式下生成的报告文件。       //  相对于捆绑输出目录。       // reportFilename: 'report.html',       //  模块大小默认显示在报告中。       //  应该是`stat`，`parsed`或者`gzip`中的一个。       //  有关更多信息，请参见“定义”一节。       // defaultSizes: 'parsed',       //  在默认浏览器中自动打开报告       // openAnalyzer: true,       //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成       // generateStatsFile: false,       //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。       //  相对于捆绑输出目录。       // statsFilename: 'stats.json',       //  stats.toJson（）方法的选项。       //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。       //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21       // statsOptions: null,       // logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。     }), 复制代码

模块功能：能够查看到你的文件打包压缩后中真正的内容，找出那些模块组成最大的大小，找到错误的模块，优化它！最好的事情是它支持缩小捆绑！它解析它们以获得实际大小的捆绑模块。它也显示他们的gzipped大小！

三、使用webpack把第三方库模块分离 - optimization + splitChunks

splitChunks: {     chunks: "async",     minSize: 30000,     minChunks: 1,     maxAsyncRequests: 5,     maxInitialRequests: 3,     automaticNameDelimiter: '~',     name: true,     cacheGroups: {         vendors: {             test: /[\\/]node_modules[\\/]/,             priority: -10         },     default: {             minChunks: 2,             priority: -20,             reuseExistingChunk: true         }     } } 复制代码

// webpack.config.js module.exports = {   optimization: {     splitChunks: {       chunks: 'all',       minSize: 30000,       maxSize: 0,       minChunks: 1,       maxAsyncRequests: 5,       maxInitialRequests: 3,       automaticNameDelimiter: '~',       name: true,       cacheGroups: {         moment: {           name: 'moment',           test: /[\\/]node_modules[\\/]moment[\\/]/,           priority: -6 // 两个cacheGroup.priority相同时，先定义的会先命中         },         handsontable: {           name: 'handsontable',           test: /[\\/]node_modules[\\/]handsontable[\\/]/,           priority: -7         },         angular: {           name: 'angular',           test: /[\\/]node_modules[\\/]@angular[\\/]/,           priority: -9         },        vendors: {           name: 'vendors',           test: /[\\/]node_modules[\\/]/,           priority: -10         },         default: {           name: 'default',           minChunks: 2,           priority: -20,           reuseExistingChunk: true         }       }     }   } } 复制代码

npm install --save-dev html-webpack-plugin

yarn add --dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = {   plugins: [     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     }),     new HtmlWebpackPlugin({       filename: 'index.html',  // 根据模板文件生成的html的文件名       template: path.join(__dirname, 'src/index.html'),        chunksSortMode: 'manual',       chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']     })   ] }

<!doctype html> <html lang="zh"> <head>   <meta charset="utf-8">   <meta http-equiv="Pragma" content="no-cache"/>   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>   <meta http-equiv="Expires" content="0"/>   <meta name="viewport" content="width=device-width,initial-scale=1">   <meta name="renderer" content="webkit">   <meta name="force-rendering" content="webkit">   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <title>test</title>   <base href="/">   <link rel="icon" type="image/png" href="favicon.png">   <link href="styles.bf72314ba2e0c15c73f2.css" rel="stylesheet"> </head> <body> <app-root></app-root> <div id="preloader">   <div>     <div class="loader loader--glisteningWindow"></div>   </div> </div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="runtime.fe0efdd131eb00c21b3a.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vendors.6d9d661339fe7a583752.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="polyfills.5cb77843a9758f0097e1.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts.d526d9658102820143d1.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="moment.65d799ec0675b5ff9b59.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="handsontable.c50df86ef38503e832a5.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="main.db888715d5d02500d39e.js"></script> </body> </html>

const webpack = require('webpack') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = {   externals: {        // 打包除外的文件     echarts: 'echarts'   },   optimization: {     splitChunks: {       chunks: "all",       minSize: 20000,       minChunks: 1,       maxAsyncRequests: 5,       maxInitialRequests: 3,       automaticNameDelimiter: '~',       name: true,       cacheGroups: {         moment: {           name: 'moment',           test: /[\\/]node_modules[\\/]moment[\\/]/,           priority: -6         },         handsontable: {           name: 'handsontable',           test: /[\\/]node_modules[\\/]handsontable[\\/]/,           priority: -7         },         angular: {           name: 'angular',           test: /[\\/]node_modules[\\/]@angular[\\/]/,           priority: -9         },         vendors: {           name: 'vendors',           test: /[\\/]node_modules[\\/]/,           priority: -10         },         default: {           name: 'default',           minChunks: 2,           priority: -20,           reuseExistingChunk: true         }       }     }   },   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     }),     new HtmlWebpackPlugin({       filename: 'index.html',       template: path.join(__dirname, 'src/index.html'),       chunksSortMode: 'manual',       chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']      // 限定顺序，main.js必须在最后     })   ] } 复制代码