关于angularjs: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 配置环境。该工作空间的顶层蕴含着全工作空间级的配置文件、根利用的配置文件以及一些蕴含根利用的源文件和测试文件的子文件夹。

工作空间配置文件

用处

.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/a105624…，就须要更改 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 并增加到（子）我的项目的根目录：

 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

在 webpack4.x 中，咱们应用 optimization.splitChunks 来拆散专用的代码块。SplitChunks 插件简略的来说就是 Webpack 中一个提取或拆散代码的插件，次要作用是提取公共代码，避免代码被反复打包，拆分过大的 js 文件，合并零散的 js 文件。

这里说的拆散，当然只是针对一些第三方库（个别来自 node_modules），以及咱们本人定义的工具库（或专用办法）。

不知如何下手？首先，咱们来看官网给的一份

1. 默认配置：

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 文件，这个插件有两个重要作用。

1. 创立 HTML 页面文件到你的输入目录
2. 将 webpack 打包后的 chunk 主动引入到这个 HTML 中

1. 装置

npm install –save-dev html-webpack-plugin

应用 yarn

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 必须在最初     })   ] } 复制代码

心愿大家打包顺利，我的项目运行快快滴????。

作者：青颜的天空