webpack - HtmlWebpackPlugin理解

时间 2019-11-19

标签 webpack htmlwebpackplugin 理解繁體版

原文原文链接

该插件的两个主要做用：javascript

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题css
能够生成建立html入口文件，好比单页面能够生成一个html文件入口，配置N个html-webpack-plugin能够生成N个页面入口html

html-webpack-plugin

插件的基本做用就是生成html文件。原理很简单：java

将 webpack中`entry`配置的相关入口thunk 和 `extract-text-webpack-plugin`抽取的css样式插入到该插件提供的`template`或者`templateContent`配置项指定的内容基础上生成一个html文件，具体插入方式是将样式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。webpack

实例化该插件时能够不配置任何参数，例以下面这样：web

var HtmlWebpackPlugin = require('html-webpack-plugin')
    
webpackconfig = {
    ...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的entry配置全部入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。例如上面生成的html文件内容以下：数组

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script>
  <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body>
</html>

固然可使用具体的配置项来定制化一些特殊的需求，那么插件有哪些配置项呢？缓存

html-webpack-plugin配置项

插件提供的配置项比较多，经过源码能够看出具体的配置项以下：异步

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元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，以下ejs模板语法形式：
```
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
```
filename：输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还能够为输出文件指定目录位置（例如'html/index.html'）
关于filename补充两点：ui

一、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
二、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。
template: 本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如好比 handlebars!src/index.hbs；
关于template补充几点：

一、template配置项在html文件使用file-loader时，其所指定的位置找不到，致使生成的html文件内容不是指望的内容。
二、为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: './index.html'，若没有为.html指定任何loader就使用ejs-loader
templateContent: string|function，能够指定模板的内容，不能与template共存。配置值为function时，能够直接返回html字符串，也能够异步调用返回html字符串。
inject：向template或者templateContent中注入全部静态资源，不一样的配置值注入的位置不经相同。

一、true或者body：全部JavaScript资源插入到body元素的底部
二、head: 全部JavaScript资源插入到head元素中
三、false：全部静态资源css和JavaScript都不会注入到模板文件中

favicon: 添加特定favicon路径到输出的html文档中，这个同title配置项，须要在模板中动态获取其路径值
hash：true|false，是否为全部注入的静态资源添加webpack每次编译产生的惟一hash值，添加hash形式以下所示：
```
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
```
chunks：容许插入到模板中的一些chunk，不配置此项默认会将entry中全部的thunk注入到模板中。在配置多个页面时，每一个页面注入的thunk应该是不相同的，须要经过该配置为不一样页面注入不一样的thunk；
excludeChunks: 这个与chunks配置项正好相反，用来配置不容许注入的thunk。
chunksSortMode: none | auto| function，默认auto；容许指定的thunk在插入到html文档前进行排序。
>function值能够指定具体排序规则；auto基于thunk的id进行排序； none就是不排序
xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
cache: true|fasle, 默认true；若是为true表示在对应的thunk文件修改后就会emit文件
showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个颇有用，在生成html文件的过程当中有错误信息，输出到页面就能看到错误相关信息便于调试。

minify: {....}|false；传递 html-minifier 选项给 minify 输出，false就是不使用html压缩。下面的是一个用于配置这些属性的一个例子：

    new HtmlWebpackPlugin({
          title:'rd平台',
          template: 'entries/index.html', // 源模板文件
          filename: './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
          showErrors: true,
          inject: 'body',
          chunks: ["common",'index']
      })

配置多个html页面

html-webpack-plugin的一个实例生成一个html文件，若是单页应用中须要多个页面入口，或者多页应用时配置多个html时，那么就须要实例化该插件屡次；

即有几个页面就须要在webpack的plugins数组中配置几个该插件实例：

var main = ["index", "submit", "success", "address", "address-edit"]
plugins:[
...main.map(res => {
            return new HtmlWebpackPlugin({
                template: resolve(`../src/${res}.html`),
                filename: `./${res}.html`, //`./${res}.[chunkhash:6].html`,
                chunks: [
                    'vendor', `${res}`
                ],
                //hash: true,
                cache: false,
                minify: {
                    // removeComments: true,
                    // collapseWhitespace: false
                    removeComments: process.env.NODE_ENV ===  'development' ? false : true,
                    collapseWhitespace: process.env.NODE_ENV ===  'development' ? false : true,
                    conservativeCollapse: process.env.NODE_ENV ===  'development' ? false : true
                }
            })
        })
]