html-webpack-plugin插件那些事

html-webpack-plugin是一个webpack插件。

一：配置项

插件提供的配置项比较多，通过源码可以看出具体的配置项如下：

this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false
  }, options);

title : 生成的HTML模板的title，如果模板中有设置title的名字，则会忽略这里的设置；

filename : 用于生成的HTML文件的名称，默认是index.html。你可以在这里指定子目录（例如:assets/admin.html）；

关于filename补充两点：

1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。

2、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。

chunks : 引入的模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入。

template : 模板来源文件（模板的路径）。

inject ：指引入模块的注入位置；可取值有：true | ‘head’ | ‘body’ | false 。把所有产出的文件注入到给定的 template 或templateContent。取值为 true或 ‘body’时所有javascript资源将被放置在body元素的底部，取值为“head”时，则会放在head元素内。

favicon : 给定的图标路径，可将其添加到输出html中。

minify : {…} | false 。传一个html-minifier 配置object来压缩输出。是html-webpack-plugin中集成的 html-minifier ，生成模板文件压缩配置，有很多配置项，可以查看详细文档；

   caseSensitive: false, //是否大小写敏感
 collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled  collapseWhitespace: true //是否去除空格

hash : true | false。是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，如果是true，会给所有包含的script和css添加一个唯一的webpack编译的hash值。这对于缓存清除非常有用。比如最终引入是：<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。这个可以避免缓存带来的麻烦。

cache : true | false 。如果传入true（默认），只有在文件变化时才会重新生成。

showErrors : true | false 。如果传入true（默认），错误信息将写入html页面。

chunksSortMode : 引入模块的排序方式，支持的值：'none' | 'default' | {function}-default:'auto' 默认为‘auto’。

excludeChunks : 排除的模块，即允许你跳过一些chunks（例如，不要单元测试的 chunk）。

xhtml : 生成的模板文档中标签是否自动关闭，针对xhtml的语法，会要求标签都关闭，默认false。

二：基础用法

该插件将为您生成一个HTML5文件，这个文件用script标签引用所有的webpack包。只需将插件添加到您的webpack配置，如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  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入口点，他们都将包括在生成的HTML文件script标签中。

如果你有用webpack产出css文件（例如用ExtractTextPlugin提取的css文件），那么html-webpack-plugin会在html的head中插件link标签引入这些css文件。

三：完整配置

下面是一个示例webpack配置说明如何使用这些选项：

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

四：生成多个html文件

在plugins 数组中，多次声明这个插件即可生成多个html文件。如下：

例子1：

{
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // 生成默认的是 index.html 文件名
    new HtmlWebpackPlugin({  // 也可以指定如： test.html 的文件名 
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

例子2：

 1 plugins:[
 2         new webpack.BannerPlugin('测试webpack搭建   '),
 3         new HtmlWebpackPlugin(),
 4         new HtmlWebpackPlugin({
 5           title:'测试webpack',
 6           template: 'src/template/index.html', // 源模板文件
 7           filename: './index1.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
 8           showErrors: true,
 9           inject: 'body',
10           chunks: ["index"],
11           favicon:"./src/fav.ico",
12           hash:true,
13           minify:{
14                 caseSensitive: false, //是否大小写敏感
15                 removeComments:true, // 去除注释
16                 removeEmptyAttributes:true, // 去除空属性
17                 collapseWhitespace: true //是否去除空格
18             }
19       }),
20         new HtmlWebpackPlugin({
21           title:'测试webpack',
22           template: 'src/template/index.html', // 源模板文件
23           filename: './index2.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
24           showErrors: true,
25           inject: 'body'
26       })
27     ]

如果你在webpack 配置文件中设置了publicPath。htmlWebpackPlugin.files将会正确映射到资源散列。

参考地址：

https://blog.csdn.net/keliyxyz/article/details/51513114

https://www.cnblogs.com/sunflowerGIS/p/6820912.html

html-webpack-plugin插件那些事

猜你喜欢