HTML Webpack Plugin详细介绍及使用

myzbx 2024-12-02 22:41 10 浏览

概念

HTML Webpack Plugin这是一个webpack插件，它简化了HTML文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。

安装

针对webpack的版本，需要安装对应不同的版本。

webpack4

npm i --save-dev html-webpack-plugin@4

webpack5

  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 charset="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。您也可以在这里指定一个子目录(例如:assets/admin.html)。占位符[name]将被条目名称替换。也可以是一个函数，例如(entryName) => entryName + '.html'。

template

类型：String

默认值：空

描述：默认情况下，它将使用src/index.ejs(如果存在的话)。

templateContent

类型：string|Function|false

默认值：false

描述：可以用来代替模板提供一个内联模板。

templateParameters

类型：Boolean|Object|Function

默认值：false

描述：允许覆盖模板中使用的参数。

inject

类型：Boolean|String

默认值：true

描述：true || 'head' || 'body' || false将所有资产注入到给定的模板或templateContent中。当传递'body'时，所有javascript资源将被放置在body元素的底部。'head'将把脚本放置在head元素中。设置为true时，将根据scriptLoading选项，决定是把脚本添加到head还是body中。使用false禁用自动注入。

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'}。

base

类型：Object|String|false

默认值：false

描述：注入一个base标签。如base:“https://example.com/path/page.html

minify

类型：Boolean|Object

默认值：如果mode为'production'则为true，否则为false

描述：控制是否以及以何种方式压缩输出。

hash

类型：Boolean

默认值：false

描述：如果为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

默认值：false

描述：如果为true，则将link标签呈现为自动关闭(XHTML兼容)

下面是一个webpack配置示例，演示了如何使用这些选项：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html'
    })
  ]
}

生成多个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/assets/test.html'
    })
  ]
}

编写模板

如果默认生成的HTML不能满足您的需要，您可以提供自己的模板。最简单的方法是使用template选项并传递一个定制的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 charset="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项目的默认模板作为你自己编写模板的起点。

HTML 标题

上一篇：HTML学习笔记:各种常用标签
下一篇：3_28用 p 元素代表段落(基础HTML和HTML5)

HTML Webpack Plugin详细介绍及使用

概念

安装

使用

选项

生成多个HTML文件

编写模板

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」