webpack 插件html-webpack-plugin的具体使用

2023-09-14 09:38:07 68

本文介绍了webpack插件html-webpack-plugin的具体使用，分享给大家，具体如下：

插件地址：https://www.npmjs.com/package/html-webpack-plugin

这个插件用来简化创建服务于webpackbundle的HTML文件，尤其是对于在文件名中包含了hash值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成HTML文件，也可以使用lodash模板加载生成的bundles，或者自己加载这些bundles。

Installation

使用npm安装这个插件

$npminstallhtml-webpack-plugin@2--save-dev

BasicUsage

这个插件可以帮助生成HTML文件，在body元素中，使用script来包含所有你的webpackbundles，只需要在你的webpack配置文件中如下配置：

varHtmlWebpackPlugin=require('html-webpack-plugin')
varwebpackConfig={
entry:'index.js',
output:{
path:'dist',
filename:'index_bundle.js'
},
plugins:[newHtmlWebpackPlugin()]
}

这将会自动在dist目录中生成一个名为index.html的文件，内容如下：





WebpackApp

如果你有多个webpack入口点，它们都会被包含在生成的script元素中。

如果有任何的CSS资源包含在webpack输出中（例如，使用ExtractTextPlugin提炼出的css），这些将会使用link包含在HTML页面的head元素中。

Configuration

可以进行一系列的配置，支持如下的配置信息

title:用来生成页面的title元素
filename:输出的HTML文件名，默认是index.html,也可以直接配置带有子目录。
template:模板文件路径，支持加载器，比如html!./index.html
inject:true|'head'|'body'|false ,注入所有的资源到特定的template或者templateContent中，如果设置为true或者body，所有的javascript资源将被放置到body元素的底部，'head'将放置到head元素中。
favicon:添加特定的favicon路径到输出的HTML文件中。
minify:{}|false,传递html-minifier选项给minify输出
hash:true|false,如果为true,将添加一个唯一的webpack编译hash到所有包含的脚本和CSS文件，对于解除cache很有用。
cache:true|false，如果为true,这是默认值，仅仅在文件修改之后才会发布文件。
showErrors:true|false,如果为true,这是默认值，错误信息会写入到HTML页面中
chunks:允许只添加某些块(比如，仅仅unittest块)
chunksSortMode:允许控制块在添加到页面之前的排序方式，支持的值：'none'|'default'|{function}-default:'auto'
excludeChunks:允许跳过某些块，(比如，跳过单元测试的块)

下面的示例演示了如何使用这些配置。

{
entry:'index.js',
output:{
path:'dist',
filename:'index_bundle.js',
hash:true
},
plugins:[
newHtmlWebpackPlugin({
title:'MyApp',
filename:'assets/admin.html'
})
]
}

生成多个HTML文件

通过在配置文件中添加多次这个插件，来生成多个HTML文件。

{
entry:'index.js',
output:{
path:'dist',
filename:'index_bundle.js'
},
plugins:[
newHtmlWebpackPlugin(),//Generatesdefaultindex.html
newHtmlWebpackPlugin({//Alsogenerateatest.html
filename:'test.html',
template:'src/assets/test.html'
})
]
}

编写自定义模板

如果默认生成的HTML文件不适合你的需要看，可以创建自己定义的模板。方便的方式是通过inject选项，然后传递给定制的HTML文件。html-webpack-plugin将会自动注入所有需要的CSS,js,manifest和favicon文件到标记中。

plugins:[
newHtmlWebpackPlugin({
title:'Customtemplate',
template:'my-index.html',//Loadacustomtemplate
inject:'body'//Injectallscriptsintothebody
})
]

my-index.html文件





<%=htmlWebpackPlugin.options.title%>

如果你有模板加载器，可以使用它来解析这个模板。

module:{
loaders:[
{test:/\.hbs$/,loader:"handlebars"}
]
},
plugins:[
newHtmlWebpackPlugin({
title:'CustomtemplateusingHandlebars',
template:'my-index.hbs',
inject:'body'
})
]

另外，如果你的模式是一个字符串，可以使用templateContent传递它。

plugins:[
newHtmlWebpackPlugin({
inject:true,
templateContent:templateContentString
})
]

如果inject特性不适合你的需要，你希望完全控制资源放置。可以直接使用lodash语法，使用 defaulttemplate作为起点创建自己的模板。

templateContent选项也可以是一个函数，以便使用其它语言，比如jade：

plugins:[
newHtmlWebpackPlugin({
templateContent:function(templateParams,compilation){
//Returnyourtemplatecontentsynchronouslyhere
return'..';
}
})
]

或者异步版本

plugins:[
newHtmlWebpackPlugin({
templateContent:function(templateParams,compilation,callback){
//Returnyourtemplatecontentasynchronouslyhere
callback(null,'..');
}
})
]

注意，如果同时使用template和templateContent，插件会抛出错误。

变量o在模板中是在渲染时传递进来的数据，这个变量有如下的属性：

1、htmlWebpackPlugin:这个插件的相关数据◦

htmlWebpackPlugin.files:资源的块名，来自webpack的stats对象，包含来自entry的从entrypointname到bundle文件名映射。

"htmlWebpackPlugin":{
"files":{
"css":["main.css"],
"js":["assets/head_bundle.js","assets/main_bundle.js"],
"chunks":{
"head":{
"entry":"assets/head_bundle.js",
"css":["main.css"]
},
"main":{
"entry":"assets/main_bundle.js",
"css":[]
},
}
}
}

如果在webpack配置文件中，你配置了publicPath，将会反射正确的资源

htmlWebpackPlugin.options:传递给插件的配置。

2、webpack:webpack的stats对象。

3、webpackConfig:webpack配置信息。

过滤块

可以使用chunks来限定特定的块。

plugins:[
newHtmlWebpackPlugin({
chunks:['app']
})
]

还可以使用excludeChunks来排除特定块。

plugins:[
newHtmlWebpackPlugin({
excludeChunks:['dev-helper']
})
]

事件

通过事件允许其它插件来扩展HTML。

html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用方式：

compilation.plugin('html-webpack-plugin-before-html-processing',function(htmlPluginData,callback){
htmlPluginData.html+='Themagicfooter';
callback();
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

webpack 插件html-webpack-plugin的具体使用

热门推荐

随机推荐