对于 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）测试构成的文件。
要想创建工作区和初始应用项目：
- 运行 CLI 命令
ng new，并提供一个名字my-app，如下所示：ng new my-app 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 包含一个开发服务器，以便你能轻易地在本地构建应用和启动开发服务器。
- 进入工作区目录（
my-app）。 - 使用 CLI 命令
ng serve启动开发服务器，并带上--open选项。
ng serve --open- 1
ng serve 命令会自动启动服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。
--open（或只用 -o）选项会自动打开浏览器，并访问 http://localhost:4200/。
第四步：编辑你的第一个 Angular 组件
组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。
作为初始应用的一部分，CLI 也会为你创建第一个 Angular 组件。它就是根组件，名叫 app-root。
- 打开
./src/app/app.component.ts。 - 把
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
代码语言：javascript复制h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;}工作区配置文件
每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。
工作空间配置文件 | 用途 |
|---|---|
.editorconfig | 代码编辑器的配置。参见 EditorConfig。 |
.gitignore | 指定 Git 应忽略的不必追踪的文件。 |
README.md | 根应用的简介文档. |
angular.json | 为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。欲知详情，请参阅 Angular 工作空间配置 部分。 |
package.json | 配置工作空间中所有项目可用的 npm 包依赖。有关此文件的具体格式和内容，请参阅 npm 的文档。 |
package-lock.json | 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。欲知详情，请参阅 npm 的文档。如果你使用的是 yarn 客户端，那么该文件就是 yarn.lock。 |
src/ | 根项目的源文件。 |
node_modules/ | 向整个工作空间提供npm包。工作区范围的node_modules依赖关系对所有项目都可见。 |
tsconfig.json | 工作空间中各个项目的默认 TypeScript 配置。比如运行项目时遇到一个问题https://blog.csdn.net/a1056244734/article/details/108326580，就需要更改tsconfig.json中配置 |
tsconfig.base.json | 供工作空间中所有项目使用的基础 TypeScript 配置。所有其它配置文件都继承自这个基础文件。欲知详情，参见 TypeScript 文档中的使用 extends 进行配置继承部分 |
tslint.json | 工作空间中各个项目的默认 TSLint 配置。比如全局是否使用单引号，变量命名语法，每行最大字段数等等 |
应用项目文件
CLI 命令 ng new my-app 会默认创建名为 “my-app” 的工作空间文件夹，并在 src/ 文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。
当工作空间文件结构到位时，可以在命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用（除非你在创建其它应用之后更改了默认值）。
除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。
对于单应用的工作区，工作空间的 src/ 子文件夹包含根应用的源文件（应用逻辑、数据和静态资源）。对于多项目的工作空间，projects/ 文件夹中的其它项目各自包含一个具有相同结构的 project-name/src/ 子目录。
应用源文件
顶层文件 src/ 为测试并运行你的应用提供支持。其子文件夹中包含应用源代码和应用的专属配置。
应用支持文件 | 目的 |
|---|---|
app/ | 包含定义应用逻辑和数据的组件文件。 |
assets/ | 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。 |
environments/ | 包含特定目标环境的构建配置选项。默认情况下，有一个无名的标准开发环境和一个生产（“prod”）环境。你还可以定义其它的目标环境配置。 |
favicon.ico | 用作该应用在标签栏中的图标。 |
index.html | 当有人访问你的站点时，提供服务的主要 HTML 页面。CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件，所以你通常不用手动添加任何 <script> 或 <link> 标签。 |
main.ts | 应用的主要切入点。用 JIT 编译器编译应用，然后引导应用的根模块（AppModule）在浏览器中运行。你也可以在不改变任何代码的情况下改用 AOT 编译器，只要在 CLI 的 build 和 serve 命令中加上 --aot 标志就可以了。 |
polyfills.ts | 为浏览器支持提供了腻子（polyfill）脚本。 |
styles.sass | 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。 |
test.ts | 单元测试的主入口点，带有一些 Angular 特有的配置。你通常不需要编辑这个文件。 |
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 组件、模板和样式也都在这里。
SRC/APP/ 文件 | 用途 |
|---|---|
app/app.component.ts | 为应用的根组件定义逻辑，名为 AppComponent。当你向应用中添加组件和服务时，与这个根组件相关联的视图就会成为视图树的根。 |
app/app.component.html | 定义与根组件 AppComponent 关联的 HTML 模板。 |
app/app.component.css | 为根组件 AppComponent 定义了基本的 CSS 样式表。 |
app/app.component.spec.ts | 为根组件 AppComponent 定义了一个单元测试。 |
app/app.module.ts | 定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时，它们也必须在这里声明。 |
app/package.json | 此文件只会出现在使用 --strict 模式创建的应用中。此文件不是供包管理器使用的。它用来告诉各种工具和打包器，这个目录下的代码是否没有非局部化的副作用。 |
应用配置文件
根应用的配置文件位于工作空间的根目录下。对于多项目工作空间，项目专属的配置文件位于项目根目录 projects/project-name/。
项目专属的 TypeScript 配置文件继承自工作区范围内的 tsconfig.base.json，而项目专属的 TSLint 配置文件则继承自全工作区级内的 tslint.json。
应用专属的配置文件 | 用途 |
|---|---|
.browserslistrc``browserslist | 配置各种前端工具之间共享的目标浏览器和 Node.js 版本。欲知详情，请参阅 GitHub 上的浏览器列表。 |
karma.conf.js | 应用专属的 Karma 配置。 |
tsconfig.app.json | 应用专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器的选项。参见 TypeScript 配置。 |
tsconfig.spec.json | 应用测试的 TypeScript 配置。参见 TypeScript 配置。 |
tslint.json | 应用专属的 TSLint 配置。 |
端到端测试文件（基本用不到）
根级的 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并添加到（子）项目的根目录：
代码语言：javascript复制 const webpack = require('webpack'); module.exports = { plugins: [ new webpack.DefinePlugin({ "VERSION": JSON.stringify("4711") }) ] } 复制代码4. 在您的 app.component.ts中使用全局变量VERSION：
代码语言：javascript复制 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配置的开关启动应用程序：
代码语言：javascript复制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中补充我们需要的功能了，笔者主要集中在了两大块。
- 添加BundleAnalyzerPlugin，分析打包文件
- 第三方库模块分离 - optimization splitChunks，分割较大的文件
下面分别描述
二、webpack-bundle-analyzer 打包文件分析工具
1.安装
代码语言：javascript复制$ 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.该插件默认配置
代码语言：javascript复制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
在 webpack4.x 中，我们使用 optimization.splitChunks 来分离公用的代码块。SplitChunks插件简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。
这里说的分离，当然只是针对一些第三方库（一般来自 node_modules），以及我们自己定义的工具库（或公用方法）。
不知如何下手？首先，我们来看官网给的一份
1. 默认配置：
代码语言：javascript复制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 } } } 复制代码接着，我们再来看下它们的含义：
- chunks： 该属性值的数据类型可以是 字符串 或者 函数。如果是字符串，那它的值可能为 initial | async | all 三者之一。默认值的数据类型为 字符串，默认值为 async，但推荐用 all。它表示将哪种类型的模块分离成新文件。字符串参数值的作用分别如下：
- initial：表示对异步引入的模块不处理
- async：表示只处理异步模块
- all：无论同步还是异步，都会处理
- minSize： 该属性值的数据类型为数字。它表示将引用模块分离成新代码文件的最小体积，默认为 30000，单位为字节，即 30K（指min gzip之前的体积）。这里的 30K 应该是最佳实践，因为如果引用模块小于 30K 就分离成一个新代码文件，那页面打开时，势必会多增加一个请求。
- maxSize： 把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
- minChunks： 该属性值的数据类型为数字。它表示将引用模块如不同文件引用了多少次，才能分离生成新代码文件。默认值为 1
- maxAsyncRequests： 该属性值的数据类型为数字，默认值为 5。它表示按需加载最大的并行请求数，针对异步。
- maxInitialRequests： 该属性值的数据类型为数字，默认值为 3。它表示单个入口文件最大的并行请求数，针对同步。
- automaticNameDelimiter： 该属性值的数据类型为字符串，默认值为。它表示分离后生成新代码文件名称的链接符，比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库，那么，最后打包后分离生成的公用文件名可能是 xxapp1~app2.js 这样的，即以 ~ 符号连接。
- name： 该属性值的数据类型可以是 布尔值 或者 函数（返回值为字符串），其中布尔值得为 true，此时，分离文件后生成的文件名将基于 cacheGroups 和 automaticNameDelimiter。如果设置为 false，则不会进行模块分离。
- cacheGroups： 该属性值的数据类型为对象，它的值可以继承 splitChunks.* 中的内容。如果 cacheGroups存在与 splitChunks.* 同名的属性，则 cacheGroups 的属性值则直接覆盖 splitChunks.* 中设置的值。
- test： 该属性值的数据类型可以为 字符串 或 正则表达式，它规定了哪些文件目录的模块可以被分离生成新文件。
- priority： 该属性值的数据类型可以为数字，默认值为 0。它表示打包分离文件的优先
- reuseExistingChunk： 该属性值的数据类型可以为布尔值。它表示针对已经分离的模块，不再重新分离。
2.分离第三方库
要将第三方库分离出来，我们需要调整配置文件，设置 chunks: 'all'，即表示让所有加载类型的模块在某些条件下都能打包。
3.分离工具函数
打包中，我们发现，工具函数模块（utils）的源码被分别打包到了两个文件中，这显然是不对。之所以出现这种情况，是因为我们设置了 minSize: 30000，即分离成独立文件的最小体积为 30K，而这里的 工具函数（utils.js）只有几KB，所以，没被分离成单独的文件。
4.第三方库合并打包并重命名
有的时候，我们希望将所有来自 node_modules 的第三方库都打包到同一个文件中。显然，上面的打包配置并没有满足这个条件。并且，我们还希望可以对打包后的文件名进行重命名。
要完成，只需要在 cacheGroups 设置 name 属性即可。这里，笔者还把项目中使用到的moment、handsontable、angular库单独分离出来了。
// 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 } } } } } 复制代码5.SplitChunks插件配置选项
chunks选项，决定要提取那些模块。 默认是async：只提取异步加载的模块出来打包到一个文件中。 异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。 同步加载的模块：通过import xxx或require('xxx')加载的模块。all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。minSize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。maxSize选项：把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。minChunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。maxAsyncRequests选项：最大的按需(异步)加载次数，默认为 6。maxInitialRequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。- 先说一下优先级
maxInitialRequests/maxAsyncRequests<maxSize<minSize。 automaticNameDelimiter选项：打包生成的js文件名的分割符，默认为~。name选项：打包生成js文件的名称。cacheGroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项，其余选项和外面一致，若cacheGroups每项中有，就按配置的，没有就使用外面配置的。test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。reuseExistingChunk选项：true/false。为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的js文件。enforce选项：true/false。为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项
四、HtmlWebpackPlugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，这个插件有两个重要作用。
- 创建HTML页面文件到你的输出目录
- 将webpack打包后的chunk自动引入到这个HTML中
1.安装
代码语言：javascript复制npm install --save-dev html-webpack-plugin使用yarn
代码语言：javascript复制yarn add --dev html-webpack-plugin 2.基本用法
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下：
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'] }) ] } 这将会产生一个包含以下内容的文件 dist/index.html：
<!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 src="runtime.fe0efdd131eb00c21b3a.js"></script> <script src="vendors.6d9d661339fe7a583752.js"></script> <script src="polyfills.5cb77843a9758f0097e1.js"></script> <script src="scripts.d526d9658102820143d1.js"></script> <script src="moment.65d799ec0675b5ff9b59.js"></script> <script src="handsontable.c50df86ef38503e832a5.js"></script> <script src="main.db888715d5d02500d39e.js"></script> </body> </html> 如果你有多个 webpack 入口点， 他们都会在生成的HTML文件中的 script 标签内。
需要注意的是，默认angular-cli打包生成的入口文件也被配置成了index.html，所以我们需要更改angular.jaon文件中的配置。并且，由于Angular单页面应用的入口文件为main.ts 所以！chunks配置中，main 一定一定要放在最后，否则运行会出错，笔者因为没有放在最后找了一晚上的bug~~
改为：
3.HtmlWebpackPlugin插件配置选项
您可以将配置选项的哈希值传递给html-webpack-plugin。允许的值如下：
名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
title | {String} | Webpack App | 用于生成的HTML文档的标题 |
filename | {String} | 'index.html' | 将HTML写入的文件。默认为index.html。您可以在这里指定一个子目录（如：assets/admin.html） |
template | {String} | `` | webpack模板的相对或绝对路径。默认情况下，它将使用（src/index.ejs如果存在）。 |
templateContent | {string、Function、false} | false | 可用于代替template提供内联模板-请阅读“编写自己的模板”部分 |
templateParameters | {Boolean、Object、Function} | false | 允许覆盖模板中使用的参数 |
inject | {Boolean、String} | true | `true |
publicPath | {String、'auto'} | 'auto' | 用于脚本和链接标签的publicPath |
scriptLoading | {'blocking'、'defer'} | 'blocking' | 现代浏览器支持非阻塞javascript加载（'defer'），以提高页面启动性能。 |
favicon | {String} | `` | 将给定的图标图标路径添加到输出HTML |
meta | {Object} | {} | 允许注入meta-tags。例如meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'} |
base | {Object、String、false} | false | 注入base标签。例如base: "https://example.com/path/page.html |
minify | {Boolean、Object} | true如果mode是'production'，否则false | 控制是否以及以何种方式最小化输出。有关更多详细信息。 |
hash | {Boolean} | false | 如果是，true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于清除缓存很有用 |
cache | {Boolean} | true | 仅在文件被更改时发出文件 |
showErrors | {Boolean} | true | 错误详细信息将写入HTML页面 |
chunks | {?} | ? | 仅允许您添加一些块（例如，仅单元测试块） |
chunksSortMode | {String、Function} | auto | 允许控制在将块包含到HTML中之前应如何对其进行排序。允许值为`'none' |
excludeChunks | {Array.<string>} | `` | 允许您跳过一些块（例如，不添加单元测试块） |
xhtml | {Boolean} | false | 如果true将link标签呈现为自动关闭（符合XHTML） |
最后奉上完整的webpack.partial.js
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必须在最后 }) ] } 复制代码希望大家打包顺利，项目运行快快滴
