html webpack plugin这是一个webpack插件，它简化了html文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个html文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。
针对webpack的版本，需要安装对应不同的版本。
webpack4
npm i --save-dev html-webpack-plugin@4webpack5
npm i --save-dev html-webpack-plugin这个插件会为你生成一个html5文件，其中包含了使用script标签的所有webpack的bundle。
只需将插件添加到webpack配置中，如下所示：
const path = require("path")const htmlwebpackplugin = require("html-webpack-plugin")module.exports = { entry: "./src/index.js", output: { filename:"index_bundle.js", path: path.resolve(__dirname,"dist") }, plugins: [ new htmlwebpackplugin() ]}这将生成一个包含以下内容的文件dist/index.html：
<!doctype html><html> <head> <meta chart="utf-8"> <title>webpack app</title> </head> <body> <script src="index_bundle.js"></script> </body></html>如果您有多个webpack入口点，它们都将与script标签一起包含在生成的html中。
如果你在webpack的输出中有任何css资产(例如，用mini-css-extract-plugin提取的css)，那么这些将包含在html头部的标签中。
如果你有使用它的插件，html-webpack-plugin应该在任何集成插件之前。
你可以传递一个配置选项到html-webpack-plugin。允许的值如下：
title类型：string
默认值：webpack app
描述：要用于生成的html文档的标题。
filename类型：string或function
默认值：index.html
描述：要写入html的文件的文件名驾考新规。默认为index.html。您也可以在这里指定一个子目录(例如:asts/admin.html)。占位符[name]将被条目名称替换。也可以是一个函数，例如(entryname) => entryname + ‘.html’。
六级什么时候考试template类型：string
默认值：空
描述：默认情况下，它将使用src/index.ejs(如果存在的话)。
templatecontent类型：string|function|fal
默认值：fal
描述：可以用来代替模板提供一个内联模板。
templateparameters类型：boolean|object|function
默认值：fal
描述：允许覆盖模板中使用的参数。
inject类型：boolean|string
默认值：true
描述：true || ‘head’ || ‘body’ || fal将所有资产注入到给定的模板或templatecontent中。当传递’body’时，所有javascript资源将被放置在body元素的底部。’head’将把脚本放置在head元素中。设置为true时，将根据scriptloading选项，决定是把脚本添加到head还是body中。使用fal禁用自动注入。
publicpath类型：string|’auto’
默认值：auto
描述：publicpath属性值用于script和link 标签。
scriptloading类型：blocking|defer
默认值：defer
描述：现代浏览器支持非阻塞javascript加载(“defer”)，以提高页面启动性能。
favicon类型：string
默认值：空
描述：将给定的图标路径添加到输出的html中。
meta类型：object
默认值：{}
描述：允许注入meta标签。例如:meta: {viewport: ‘width=device-width, initial-scale=1, shrink-to-fit=no’}。
ba类型：object|string|fal
默认值：fal
描述：注入一个ba标签。如ba:“
https://example.com/path/page.html
类型：boolean|object
默认值：如果mode为’production’则为true，否则离开这个地方为fal
描述：控制是否以及以何种方式压缩输出。
hash类型：boolean
默认值：fal
描述：如果为true，则附加一个唯一的webpack编译哈希到所有包含的脚本和css文件。这对于缓存销毁是很有用的
cache类型：boolean
默认值：true
描述：只有给市长的一封信当文件被更改时，才会删除它。
showerrors类型：boolean
默认值：true
描述：错误的详细信息将写入html页面。
chunks类型：?
默认值：?
描述：只允许添加一些chunk(例如：只添加unit-test 的chunk)
chunkssortmode类型：string|function
默认值：auto
描述：允许控制块在包含到html之前应该如何排序。允许的值是’none’ | ‘auto’ | ‘manual’ | {function}。
excludechunks类型：array.<string>
默认值：空
描述：允许你跳过一些chunk(例如不添加unit-test 的chunk)。
xhtml类型：boolean
默认值：fal
描述：如果为true，则将link标签呈现为自动关闭(xhtml兼容)
下面是一个webpack配置示例，演示了如何使用这些选项：
{ entry: 'index.js', output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, plugins: [ new htmlwebpackplugin({ title: 'my app', filename: 'asts/admin.html' }) ]}要生成多个html文件，请在插件数组中多次声明插件。
配置示例：
{ entry: 'index.js', output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, plugins: [ new htmlwebpackplugin(), // generates default index.html new htmlwebpackplugin({ // also generate a test.html filename: 'test.html', template: 'src/asts/test.html' }) ]}如果默认生成的html不能满足您的需要，您可以提供自己的模板。最简单的方法是使用temp昌吉学校late选项并传递一个定制的html文件。html-webpack-plugin会自动将所有必需的css, js, manifest和favicon文件注入到标记中。
配置文件的部分内容：
plugins: [ new htmlwebpackplugin({ title: 'custom template', // load a custom template (lodash by default) template: 'index.html' })]模板文件index.html的内容：
<!doctype html><html> <head> <meta chart="utf-8"/> <title><%= htmlwebpackplugin.options.title %></title> </head> <body> </body></html>如果您已经有一个模板加载器，您可以使用它来解析模板。请注意，如果您指定了html加载器并使用.html文件作为模板，也会发生这种情况。
module: { loaders: [ { test: /\.hbs$/, loader: "handlebars-loader" } ]},plugins: [ new htmlwebpackplugin({ title: 'custom template using handlebars', template: 'index.hbs' })]您可以使用现成的lodash语法。如果inject特性不适合你的需要，而你又想完全控制资产的位置，可以使用html-webpack-template项目的默认模板作为你自己编写模板的起点。
本文发布于:2023-04-05 10:15:23，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/4799e57257ccb496038881f332156f2a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：webpack使用教程（webpack5和4的区别）.doc
本文 PDF 下载地址：webpack使用教程（webpack5和4的区别）.pdf
| 留言与评论（共有 0 条评论） |
