html-webpack-plugin 使用总结-CSDN博客

html-webpack-plugin 的作用是：当使用 webpack打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。

使用

安装

npm install html-webpack-plugin --save-dev
复制代码

使用默认配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}
复制代码

html-webpack-plugin 默认将会在 output.path 的目录下创建一个 index.html 文件，并在这个文件中插入一个 script 标签，标签的 src 为 output.filename。

生成的文件如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
复制代码

当配置多个入口文件 entry 时，生成的将都会使用 script 引入。

如果 webpack 的输出中有任何CSS资源 (例如，使用 mini-css-extract-plugin 提取的 CSS)，那么这些资源将包含在 HTML 头部的 link 标记中。

更多配置

在实际的项目中，需要自定义一些 html-webpack-plugin 的配置，像指定生成目录和文件，使用指定模版生成文件，更改 document.title 信息等，这就更改默认配置来实现。

属性名	字段类型	默认值	说明
title	String	Webpack App	网页 `document.title` 的配置
filename	String	index.html	`html` 文件生成的名称，可以使用 `assets/index.html` 来指定生成的文件目录和文件名, 重点1:生成文件的跟路径为`ouput.path`的目录。重点2: ‘assets/index.html’ 和 `./assets/index.html` 这两种方式的效果时一样的，都是在 `output.path` 目录下生成 `assets/index.html`
template	String	空	生成 `filename` 文件的模版，如果存在 `src/index.ejs`，那么默认将会使用这个文件作为模版。重点：与 `filename` 的路径不同，当匹配模版路径的时候将会从项目的跟路径开始
templateParameters	Boolean\|Object\|Function	空	覆盖默认的模版中使用的参数
inject	Boolean\|String	true	制定 `webpack` 打包的 `js` `css` 静态资源插入到 `html` 的位置，为 `true` 或者 `body` 时，将会把 `js` 文件放到 `body` 的底部，为 `head` 时，将 `js` 脚本放到 `head` 元素中。
favicon	String	空	为生成的 `html` 配置一个 `favicon`
mete	Object	{}	为生成的 `html` 文件注入一些 `mete` 信息，例如： `{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`
base	Object\|String\|false	false	在生成文件中注入 `base` 标签，例如 `base: "https://example.com/path/page.html` `<base>` 标签为页面上所有的链接规定默认地址或默认目标
minify	Boolean\|Object	如果 `mode` 设置为 `production` 默认为 `true` 否则设置为 `false`	设置静态资源的压缩情况
hash	Boolean	false	如果为真，则向所有包含的 `js` 和 `CSS` 文件附加一个惟一的 `webpack` 编译散列。这对于更新每次的缓存文件名称非常有用
cache	Boolean	true	设置 `js` `css` 文件的缓存，当文件没有发生变化时，是否设置使用缓存
showErrors	Boolean	true	当文件发生错误时，是否将错误显示在页面
xhtml	Boolean	false	当设置为 `true` 的时候，将会讲 `<link>` 标签设置为符合 `xhtml` 规范的自闭合形式

属性的使用方法

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在  output.path 目录下生成 assets/admin.html 文件
    })
  ]
}
复制代码

生成多个 `html` 文件

生成多个 html 文件只需要多次在 plugins 中使用 HtmlWebpackPlugin webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在  output.path 目录下生成 assets/admin.html 文件
    })
  ]
}
复制代码

使用自定义模版生成 `html` 文件

如果默认的 html 模版不能满足业务需求，比如需要蛇生成文件里提前写一些 css 'js' 资源的引用，最简单的方式就是新建一个模版文件，并使用 template 属性指定模版文件的路径，html-webpack-plugin 插件将会自动向这个模版文件中注入打包后的 js 'css' 文件资源。

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    title: 'My App', 
    template: 'public/index.html'
  })
]
复制代码

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link src="xxx/xxx.css">
  </head>
  <body>
  </body>
</html>
复制代码

使用自定义的模版接收 HtmlWebpackPlugin 中定义的 title 需要使用 <%= htmlWebpackPlugin.options.title %>

Minification

如果 minify 选项设置为 true (webpack模式为 production 时的默认值)，生成的 HTML 将使用 HTML-minifier 和以下选项进行压缩:

{
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}
复制代码