html-webpack-plugin

html-webpack-plugin打包处理html

引言： HTML文件开始是在开发目录src下的，但最终发布时是要把包括js，css，HTML和其他资源都打包到dist（打包目录）文件下，webpack下的插件html-webpack-plugin为处理HTML而生。

---

原理

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

使用方法

  npm install html-webpack-plugin --save-dev    //下载插件
  //webpack中实例化该插
  var HtmlWebpackPlugin = require('html-webpack-plugin')
    webpackconfig = {
        ...
        plugins: [
            new HtmlWebpackPlugin({
                //该插件配置项
            })
        ]
    }

配置项说明

title：生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，如下ejs模板语法形式：

<title><%= htmlWebpackPlugin.options.title %></title>

*注意：htmlWebpackPlugin对象首字母要小写
template：本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如比如

handlebars!src/index.hbs；

补充：

1. template配置项在html文件使用file-loader时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
2. 为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template:’./index.html’，若没有为.html指定任何loader就使用ejs-loader

inject： 向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

1. true或者body：所有JavaScript资源插入到body元素的底部
2. head: 所有JavaScript资源插入到head元素中
3. false： 所有静态资源css和JavaScript都不会注入到模板文件中

hash： true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：

html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>

chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk，如下：

chunks:['common','index'],

showErrors： true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。

常用配置项模板

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

配置多个html页面

说明：每配置一个页面就要新建一个new HtmlWebpackPlugin({ })所以有必要将里面的配置项提取到一个公共方法里作为参数传入，如下：

function getHtmlPlugin(pageName) {
    return {
                template:'./src/view/'+pageName+'.html',
                filename:'view/'+pageName+'.html',
                inject:true,
                hash:true,
                chunks:['common',pageName]
           };
};

提取html文件共有的模板

1. 安装html-loader；
2. 在原HTML文件模板需要插入提取出来的模板的地方使用ejs语法require提取出来的模板；

<%=require('html-loader!提取出来的模板路径')%>

• 加粗 Ctrl + B
• 斜体 Ctrl + I
• 引用 Ctrl + Q
• 插入链接 Ctrl + L
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G
• 提升标题 Ctrl + H
• 有序列表 Ctrl + O
• 无序列表 Ctrl + U
• 横线 Ctrl + R
• 撤销 Ctrl + Z
• 重做 Ctrl + Y