html-webpack-plugin

最新推荐文章于 2024-09-04 07:11:11 发布

原创最新推荐文章于 2024-09-04 07:11:11 发布 · 898 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#node #webpack

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍html-webpack-plugin插件的工作原理及使用方法，包括配置项详解、多页面配置、共用模板提取等内容，帮助读者掌握利用该插件进行HTML文件打包的技术。

html-webpack-plugin打包处理html

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

- 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；

补充：

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

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

true或者body：所有JavaScript资源插入到body元素的底部
head: 所有JavaScript资源插入到head元素中
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文件共有的模板

安装html-loader；
在原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