webpack html加载完毕,html-webpack-plugin
安装
npm i -D html-webpack-plugin
参数
类型
默认值
描述
title
String
Webpack App
用于生成html的head.title
filename
String
index.html
默认输出的文件名,可以自定义,如: "dist/demo.html"
template
String
''
文件相对于webpack配置的路径(绝对或相对),默认值是: "src/index.ejs"(如果存在)
templateContent
string/Function/false
false
提供html模板,将此模板替换到输出的html文件里
templateParameters
Boolean/Object/Function
false
允许将指定的内容替换为自定义的内容
inject
Boolean/String
true
取值范围:true/'head'/'body'/false,true或'body':表示追加到html.body末尾,'head':表示注入到html.head中,false表示禁用
scriptLoading
blocking/defer
blocking
现代浏览器加载js的方式,使用defer来提高页面启动性能。
favicon
String
''
配置favicon路径,来输出到html
meta
Object
{}
允许注入mete元信息.
base
Object/String/false
false
注入基本tag. 如:base:"https://example.com/path/page.html
minify
Boolean/Object
生产模式:true,其他模式:false
控制以何种方式来压缩输出。false表示不压缩
hash
Boolean
false
通过hash方式来减小缓存影响
cache
Boolean
true
是否启用缓存
showErrors
Boolean
true
编译出错时是否将错误信息写入到输出的html
chunk
?
?
细化chunk配置
chunksSortMode
String/Function
auto
配置chunk输出到html前的排序规则. 取值范围:'none'/ 'auto' / 'manual'/ Function
excludeChunks
Array.
``
设置chunk的排除规则
xhtml
Boolean
false
是否开启标签自闭合
单页面示例配置
{
...
plugins: [new HtmlWebpackPlugin()]
...
}
多页面示例配置
{
...
plugins: [
new HtmlWebpackPlugin({ // 默认页面
filename: 'index.html',
template: 'src/assets/index.html'
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
...
}
摘录一些常用的属性说明:
title
webpack.config.js
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
index.html
...
...
输出
...
My App
...
filename
配置输出html的名称和路径.
1 如果不指定路径,html将直接output.path配置的路径下,如: ('./build'目录)
2 指定路径后将会输出到output.path下,并创建相应目录,如:
const {resolve} = require('path')
module.exports = {
output: {
filename: 'build.js', // 输出文件名
path: resolve(__dirname, 'build') // 输出路径
},
...
plugins:[
new HtmlWebpackPlugin({
filename:'assets/index.html'
})
]
...
}
将会输出到
./build/asstes/index.html
template
根据指定模板编译输出内容到目标html
伪代码如下:
const {resolve} = require('path');
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
...
path: 'index.html',
template: resolve(__dirname,'../src/index.html'),
...
})
]
}
templateContent
1 以html字符串的方式代替template模板
2 templateContent优先级高于template,当templateContent与template配置同时存在时,以templateContent为准.
const {resolve} = require('path');
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
...
path: 'index.html',
templateContent: ({htmlWebpackPlugin}) => `
${htmlWebpackPlugin.tags.headTags}
Hello World
${htmlWebpackPlugin.tags.bodyTags}
`,
...
})
]
}
inject
配置将一些内容输出到html文档的什么位置: head或body
1 true或'body'时输出到 html.body
2 'head'时输出到 html.head
3 false时不会输出
scriptLoading
设置
1 'blocking': 默认模式,会阻塞页面加载,直到加载完成
2 'defer': 延迟加载,需要根据"加载的js是否会改变html文档"的原则来添加
meta
赋予配置添加meta的能力
plugins: [
new HtmlWebpackPlugin({
'meta': {
// 生成:
'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
// 生成:
'theme-color': '#4285f4'
}
})
]
plugins: [
new HtmlWebpackPlugin({
'meta': {
// 生成:
// 等价于这个 http header: `Content-Security-Policy: default-src https:`
'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },
// 生成:
// 等价于这个 http header: `set-cookie: value; expires=date; path=url`
'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
}
})
]
minify
1 在生产环境(mode = 'production')默认开启(true),可以不配置minify属性即可使用,但是如果想要自定义,需要显示定义HtmlWebpackPlugin.minify属性
2 非生产环境下,也可以通过下面的配置来进行自定义配置
minify: {
collapseWhitespace: true, // 是否去除空白字符,包括空格和换行符
removeComments: true, // 是否移除注释
removeRedundantAttributes: true, // 去除冗余属性
removeScriptTypeAttributes: true, // 去除script类型属性
removeStyleLinkTypeAttributes: true, // 去除style和link类型属性
useShortDoctype: true //
}
chunk + excludeChunks
1 chunk: 设置要打包的模块
2 excludeChunks 设置排除的模块
伪代码如下:
chunks: ['app']
excludeChunks: [ 'dev-helper' ]
chunksSortMode
webpack html加载完毕,html-webpack-plugin相关推荐
- webpack 异步加载配置文件_Webpack 是怎样运行的?
在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具.它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率. 我们知道一份Webpack配置文件主要包含入口(ent ...
- webpack 热加载原理探索
前言 在使用 dora 作为本地 server 开发一个 React 组件的时候,默认使用了 hmr 插件.每次修改代码后页面直接更新,不需要手动 F5 ,感觉非常惊艳,这体验一旦用上后再也回不去了. ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
- 07_00_加载资源(Webpack Book)
Loading Assets(加载资源) In this part, you will learn how to load different types of assets using webpac ...
- 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
- 一文学会Webpack实用功能|加载器篇
Webpack 资源模块加载 通过探索我们知道可以把css文件作为打包的入口,不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口. 而 ...
- html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么?
使用webpack时加载.otf字体文件的适当方式是什么?我曾多次尝试包括在我的webpack.config.js的规则,没有任何成功的基础上,很多例子我大致如下的线路看出:对于在webpack中加载 ...
- Webpack的加载器
一.什么是加载器(loaders) loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loa ...
最新文章
- 撒花!机器学习圣经 PRML 出 Python 复现代码了!
- 可自设定长度,根据各种标点符号去分隔字符串
- 栈的链式存储及常用操作
- VC++2013出现bug: 无法打开源文件“stdafx.h”
- Mysql 监控小脚本
- Markdown简介
- Spring AOP配置文件
- SDN免费快速获得积分和直接获取下载码的几个办法,亲测有效区
- 无需拆机,Kindle 全系列 5.12.2.2 ~ 5.14.2版本如何越狱?如何安装第三方插件
- 《程序员的职业素养》
- ICML 2021奖项公布!谷歌大脑摘得桂冠,田渊栋、陆昱成获荣誉提名!
- C#中Panel控件和GroupBox控件(未完成)
- 有道词典笔3新增功能扫读和点读是怎么集成的?
- python 等值面多边形平滑_三次贝塞尔曲线平滑多边形
- 计算机出现假桌面怎么解决办法,Win10系统因为“AppHangXProcB1”造成桌面不停假死怎么处理...
- 作业(数组)---运行环境winTC(二)
- 王树尧老师运筹学课程笔记 02 高等数学基础
- 【java框架】MyBatis-Plus(1)--MyBatis-Plus快速上手开发及核心功能体验
- 文心一言 vs GPT-4,百度背水一战交卷
- 元宇宙办公穿越时空奥秘探索无限可能
热门文章
- Additive Angular Margin Loss for Deep Face Recognition翻译笔记
- dlib库包的介绍与使用,opencv+dlib检测人脸框、opencv+dlib进行人脸68关键点检测,opencv+dlib实现人脸识别,dlib进行人脸特征聚类、dlib视频目标跟踪
- 【资料】Robocom睿抗机器人开发者大赛
- 改进的负载线移相器设计与仿真(适用于45度以内移相)
- Fiddler抓包查看接口的响应时间
- Android——通过Service实现控制游戏的背景音乐
- linux常用命令:查看硬件配置的方法示例(含Jetson)
- php求一个数的阶乘,PHP基于简单递归函数求一个数阶乘的方法示例
- 微信公众号如何设置弹幕效果
- Java 分布式生成ID—雪花算法