对于 Angular 项目,推荐使用 angular-cli 建立打包项目 Angular 会默认帮咱们配置。 可是有特殊的需求时就显然不是很灵活,好比想分割一些较大的打包文件、分析每一个打包文件组成,自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日期库moment.js
。 这包括使用语言环境的功能,可是,它大大增长了总体捆绑软件的大小。这些都是须要咱们优化的地方。javascript
1、ngx-build-plus 创建额外配置
这里推荐一个工具库ngx-build-plus,不须要改不少东西就能在现有项目进行集成。接下来教你们如何使用,具体详情能够去github上找文档。虽然官方文档上只标注到了可用版本为9,可是Angular10也是可使用的。css
1. 使用CLI建立一个新的Angular项目
从零搭建Angular10项目html
先决条件
在开始以前,请确保你的开发环境已经包含了 Node.js
和 npm 包管理器。前端
Node.js
Angular 须要 Node.js
的 8.x 或 10.x 版本。java
-
要想检查你的版本,请在终端/控制台窗口中运行
node -v
命令。node
2. 添加ngx-build-plus: ng add ngx-build-plus
npm 包管理器
Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能,它们都是 npm 包。要下载和安装 npm 包,你必须拥有一个 npm 包管理器。webpack
本 “快速上手” 中使用的是 yarn 客户端命令行界面,管理依赖包git
要想检查你是否已经安装了 yarn 客户端,请在终端/控制台窗口中运行 yarn -v
命令。github
第一步:安装 Angular CLI
你要使用 Angular CLI 来建立项目、建立应用和库代码,并执行多种开发任务,好比测试、打包和发布。web
全局安装 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
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
并添加到(子)项目的根目录:
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
中补充咱们须要的功能了,笔者主要集中在了两大块。
-
添加BundleAnalyzerPlugin,分析打包文件
-
第三方库模块分离 - optimization + splitChunks,分割较大的文件
下面分别描述
2、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大小!
3、使用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
外面选项
4、HtmlWebpackPlugin
HtmlWebpackPlugin
简化了HTML文件的建立,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤为有用。 你可让插件为你生成一个HTML文件,这个插件有两个重要做用。
-
建立HTML页面文件到你的输出目录
-
将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必须在最后 }) ] } 复制代码
但愿你们打包顺利,项目运行快快滴。
做者:青颜的天空