夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
手撕webpack:HtmlWebpackPlugin 插件使用

介绍

HtmlWebpackPlugin 简化了HTML文件的创建,它可以帮我们自动生成一个 HTML 文件,并自动引入每次编译后的 webpack bundle 文件。如果你不想使用插件生成的 HTML文件, 也可以使用lodash模板提供你自己的模板。关于 lodash 模板的介绍请参考:https://lodash.com/docs#template

安装

 npm i --save-dev html-webpack-plugin
 yarn add --dev html-webpack-plugin

基本使用

下面的配置将为你生成一个 HTML5 文件, 打包后的 bundle 文件将插入到 script 标签:

var HtmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
      new HtmlWebpackPlugin()
  ]
};

编译后自动生成的 HTML 文件如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>极限编程网</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果你有多个 webpack 入口点, 他们都会在生成的HTML文件中的 script 标签内。

常用选项

插件支持很多配置选项,通过这些选项你可以控制 HTML 内容的输出。

title

title 可以控制HTML 文档中 title 标签的内容,它是一个 string 类型的字符串,默认值是 "Webpack App" 。

filename

filename 配置自动生成的 HTML 文件的文件名称,它是一个 string 类型的字符串,默认值是 "index.html" 。

template

template 配置 HTML 文件模板的绝对路径,通过该配置我们可以指定自己的 HTML 模板。 在不指定模板解析器的时候,插件会使用 lodash 的 template 做为默认解析器,这也意味着可以在模板文件内使用 lodash 的语法,如<%= %>。

templateParameters

允许覆盖模板中使用的参数,值可以是 Boolean、Object、Function。

inject

inject 规定打包后的资源文件放到 HTML 中的哪个位置。当传递true或'body'时,所有javascript资源将被放置在body元素的底部,'head'将把脚本放在head元素中。

favicon

将给定的favicon路径添加到输出HTML,它是一个 string 类型的字符串。

meta

允许向 HTML 注入 meta 标签,它是一个 object 对象。

hash

如果为 true,则向所有包含的脚本和CSS文件追加一个惟一的webpack编译散列,它是一个 Boolean 类型。


除了官方文档中提供的这些选项外,我们也可以增加自己的选项,使用案例请参考笔者的 《webpack 打包增加版本信息》 一文。

选项示例

webpack config 配置:

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '极限编程网',
      filename: 'home.html',
      inject: "body",
      template: "./home.html",
      hash: true,
      meta: {
        'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
      }
    })
  ]
}

home.html 内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

</body>
</html>

项目结构:

打包编译后的 HTML 文件内容:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
 极限编程网
    </title>
    <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
</head>
<body>
<script src="index.js?8455b0f5a47b2ed752b5">
</script>
</body>

</html>


作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2020-5-30  拜读(873)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付