HTML Webpack Plugin 详解
HTML Webpack Plugin是一个webpack插件,它简化了HTML文件的创建,以服务于你的webpack bundle。特别是对于在文件名中包含哈希的webpack包,因为每次编译文件名都会改变,这个插件就显得尤为重要。
你可以使用该插件自动生成HTML文件,或者利用lodash模板提供自己的模板,甚至可以使用自定义的加载器。
针对不同webpack版本的说明
webpack4及以下版本和webpack5版本需要安装对应的不同版本插件。
插件功能详述
这个插件能生成一个HTML5文件,其中包含了使用script标签的所有webpack的bundle。只需要将插件添加到webpack配置中,即可自动生成包含所有webpack点script标签的HTML文件。
如果在webpack的输出中有CSS资产(例如,通过mini-css-extract-plugin提取的CSS),这些都将被包含在HTML头部的标签中。
配置选项详解
- title - 用于生成的HTML文档的标题,类型为String,默认值为“Webpack App”。
- template - 默认情况下,它将使用src/index.ejs(如果存在的话)。这是一个String类型的选项。
- templateContent - 可以用来代替模板提供一个内联模板,类型为string、Function或false。
- templateParameters - 允许覆盖模板中使用的参数,类型为Boolean、Object或Function。
- inject - 将所有资产注入到给定的模板或templateContent中,类型为Boolean、String。决定是把脚本添加到head还是body中。
- publicPath - publicPath属性值用于script和link标签,类型为String或'auto',默认值为'auto'。
- 其他选项... - 还有其他多个选项,如scriptLoading、favicon、meta等,每个选项都有详细的类型、默认值和描述。
使用示例
配置文件示例
```javascript
// webpack.config.js
module.exports = {
// ...其他配置...
plugins: [
new HtmlWebpackPlugin({
// 在这里填写你的配置选项...
// ...其他选项...
}),
],
};
```