扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容主要讲解“html-webpack-plugin如何用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html-webpack-plugin如何用”吧!
创新互联服务项目包括柳城网站建设、柳城网站制作、柳城网页制作以及柳城网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，柳城网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到柳城省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
html-webpack-plugin 可能用过的 webpack 的童鞋都用过这个 plugin ,就算没用过可能也听过。我们在学习webpack的时候，可能经常会看到这样的一段代码。
// webpack.config.js
module.exports = {
entry: path.resolve(__dirname, './app/index.js'),
output:{
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
}
...
plugins: [
new HtmlWebpackPlugin()
]
}之后在终端输入 webpack 命令后
webpack
你会神奇的看到在你的 build 文件夹会生成一个 index.html 文件和一个 bundle.js 文件，而且 index.html 文件中自动引用 webpack 生成的 bundle.js 文件。
所有的这些都是 html-webpack-plugin 的功劳。它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
自己在六月第一次接触前端自动化构建，学习 webpack 和 react 时，曾经简单使用过这个插件，但也只是用了常见的几个选项，今天就跟着官方文档走一走，看看它的所有用法。
title
顾名思义，设置生成的 html 文件的标题。
filename
也没什么说的，生成 html 文件的文件名。默认为 index.html.
template
根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader， 否则webpack不能正确解析。以 jade 为例。
npm install jade-loader --save-dev
// webpack.config.js
...
loaders: {
...
{
test: /\.jade$/,
loader: 'jade'
}
}
plugins: [
new HtmlWebpackPlugin({
...
jade: 'path/to/yourfile.jade'
})
]最终在build文件夹内会生成一个 yourfile.html 和 bundle.js 文件。现在我们再回头来看看之前将的 title 属性。
如果你既指定了 template 选项，又指定了 title 选项，那么webpack 会选择哪一个？ 事实上，这时候会选择你指定的模板文件的 title, 即使你的模板文件中未设置 title。
那么 filename 呢，是否也会覆盖，其实不是，会以指定的 filename 作为文件名。
inject
注入选项。有四个选项值 true, body, head, false.
true：默认值，script标签位于html文件的 body 底部
body：同 true
head：script 标签位于 head 标签内
false：不插入生成的 js 文件，只是单纯的生成一个 html 文件
favicon：给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。
// webpack.config.js
...
plugins: [
new HtmlWebpackPlugin({
...
favicon: 'path/to/yourfile.ico'
})
]生成的 html 标签中会包含这样一个 link 标签
同 title 和 filename 一样，如果在模板文件指定了 favicon，会忽略该属性。
minify
minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。来看看这个压缩选项。
html-webpack-plugin 内部集成了html-minifier ,这个压缩选项同 html-minify 的压缩选项完全一样，
看一个简单的例子。
// webpack.config.js
...
plugins: [
new HtmlWebpackPlugin({
...
minify: {
removeAttributeQuotes: true // 移除属性的引号
}
})
]