详解html-webpack-plugin用法全解

2023-09-17 14:03:06 64

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:[
newHtmlWebpackPlugin()
]
}

之后在终端输入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为例。

npminstalljade-loader--save-dev

//webpack.config.js
...
loaders:{
...
{
test:/\.jade$/,
loader:'jade'
}
}
plugins:[
newHtmlWebpackPlugin({
...
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:[
newHtmlWebpackPlugin({
...
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:[
newHtmlWebpackPlugin({
...
minify:{
removeAttributeQuotes:true//移除属性的引号
}
})
]


testminify


testminify

hash

hash选项的作用是给生成的js文件一个独特的hash值，该hash值是该次webpack编译的hash值。默认值为false。同样看一个例子。

//webpack.config.js
plugins:[
newHtmlWebpackPlugin({
...
hash:true
})
]

执行webpack命令后，你会看到你的生成的html文件的script标签内引用的js文件，是不是有点变化了。

bundle.js文件后跟的一串hash值就是此次webpack编译对应的hash值。

$webpack
Hash:22b9692e22e7be37b57e
Version:webpack1.13.2

cache

默认值是true。表示只有在内容变化时才生成一个新的文件。

showErrors

showErrors的作用是，如果webpack编译出现错误，webpack会将错误信息包裹在一个pre标签内，属性的默认值为true，也就是显示错误信息。

chunks

chunks选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的js文件。那么chunks选项就可以决定是否都使用这些生成的js文件。

chunks默认会在生成的html文件中引用所有的js文件，当然你也可以指定引入哪些特定的文件。

看一个小例子。

//webpack.config.js
entry:{
index:path.resolve(__dirname,'./src/index.js'),
index1:path.resolve(__dirname,'./src/index1.js'),
index2:path.resolve(__dirname,'./src/index2.js')
}
...
plugins:[
newHtmlWebpackPlugin({
...
chunks:['index','index2']
})
]

执行webpack命令之后，你会看到生成的index.html文件中，只引用了index.js和index2.js

...

而如果没有指定chunks选项，默认会全部引用。

excludeChunks

弄懂了chunks之后，excludeChunks选项也就好理解了，跟chunks是相反的，排除掉某些js文件。比如上面的例子，其实等价于下面这一行

...
excludeChunks:['index1.js']

chunksSortMode

这个选项决定了script标签的引用顺序。默认有四个选项，'none','auto','dependency','{function}'。

'dependency'不用说，按照不同文件的依赖关系来排序。
'auto'默认值，插件的内置的排序方式，具体顺序这里我也不太清楚...
'none'无序？不太清楚...
{function}提供一个函数？但是函数的参数又是什么?不太清楚...

如果有使用过这个选项或者知道其具体含义的同学，还请告知一下。。。

xhtml

一个布尔值，默认值是false，如果为true,则以兼容xhtml的模式引用文件。

总结

以上，就总结完了传入newHtmlWebpackPlugin()的选项，了解全部选项的含义后，可以在项目构建时更灵活的使用。希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解html-webpack-plugin用法全解

热门推荐

随机推荐