html-webpack-plugin打包处理html
引言: HTML文件开始是在开发目录src下的,但最终发布时是要把包括js,css,HTML和其他资源都打包到dist(打包目录)文件下,webpack下的插件html-webpack-plugin为处理HTML而生。
原理
将开发目录下的指定html文档打包到dist目录下,也就是将entry
配置的相关入口thunk和extract-text-webpack-plugin
抽取的css样式插入到该插件提供的template
或者templateContent
配置项指定的内容基础上生成一个html文件,具体插入方式是将样式link
插入到head
元素中,script
插入到head
或者body
中。
使用方法
npm install html-webpack-plugin --save-dev //下载插件
//webpack中实例化该插
var HtmlWebpackPlugin = require('html-webpack-plugin')
webpackconfig = {
...
plugins: [
new HtmlWebpackPlugin({
//该插件配置项
})
]
}
配置项说明
title:生成的html文档的标题。配置该项,它并不会替换指定模板文件中的title元素的内容,除非html模板文件中使用了模板引擎语法来获取该配置项值,如下ejs模板语法形式:
<title><%= htmlWebpackPlugin.options.title %></title>
*注意:htmlWebpackPlugin对象首字母要小写
template:本地模板文件的位置,支持加载器(如handlebars、ejs、undersore、html等),如比如
handlebars!src/index.hbs;
补充:
- template配置项在html文件使用file-loader时,其所指定的位置找不到,导致生成的html文件内容不是期望的内容。
- 为template指定的模板文件没有指定任何loader的话,默认使用ejs-loader。如template:’./index.html’,若没有为.html指定任何loader就使用ejs-loader
inject: 向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同。
- true或者body:所有JavaScript资源插入到body元素的底部
- head: 所有JavaScript资源插入到head元素中
- false: 所有静态资源css和JavaScript都不会注入到模板文件中
hash: true|false,是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值,添加hash形式如下所示:
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
chunks:允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk,如下:
chunks:['common','index'],
showErrors: true|false,默认true;是否将错误信息输出到html页面中。这个很有用,在生成html文件的过程中有错误信息,输出到页面就能看到错误相关信息便于调试。
常用配置项模板
new HtmlWebpackPlugin({
title:'rd平台',
template: 'entries/index.html', // 源模板文件
filename: './index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body',
chunks: ["common",'index']
})
配置多个html页面
说明:每配置一个页面就要新建一个new HtmlWebpackPlugin({ })所以有必要将里面的配置项提取到一个公共方法里作为参数传入,如下:
function getHtmlPlugin(pageName) {
return {
template:'./src/view/'+pageName+'.html',
filename:'view/'+pageName+'.html',
inject:true,
hash:true,
chunks:['common',pageName]
};
};
提取html文件共有的模板
- 安装html-loader;
- 在原HTML文件模板需要插入提取出来的模板的地方使用ejs语法require提取出来的模板;
<%=require('html-loader!提取出来的模板路径')%>
- 加粗
Ctrl + B
- 斜体
Ctrl + I
- 引用
Ctrl + Q
- 插入链接
Ctrl + L
- 插入代码
Ctrl + K
- 插入图片
Ctrl + G
- 提升标题
Ctrl + H
- 有序列表
Ctrl + O
- 无序列表
Ctrl + U
- 横线
Ctrl + R
- 撤销
Ctrl + Z
- 重做
Ctrl + Y