html-webpack-plugin打包處理html

引言： HTML文件開(kāi)始是在開(kāi)發(fā)目錄src下的，但最終發(fā)布時(shí)是要把包括js，css，HTML和其他資源都打包到dist(打包目錄)文件下，webpack下的插件html-webpack-plugin為處理HTML而生。

原理

將開(kāi)發(fā)目錄下的指定html文檔打包到dist目錄下，也就是將entry配置的相關(guān)入口thunk和extract-text-webpack-plugin抽取的css樣式插入到該插件提供的template或者templateContent配置項(xiàng)指定的內(nèi)容基礎(chǔ)上生成一個(gè)html文件，具體插入方式是將樣式link插入到head元素中，script插入到head或者body中。

使用方法

npm install html-webpack-plugin --save-dev //下載插件

//webpack中實(shí)例化該插

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

webpackconfig = {

...

plugins: [

new HtmlWebpackPlugin({

//該插件配置項(xiàng)

})

]

}

配置項(xiàng)說(shuō)明

title：生成的html文檔的標(biāo)題。配置該項(xiàng)，它并不會(huì)替換指定模板文件中的title元素的內(nèi)容，除非html模板文件中使用了模板引擎語(yǔ)法來(lái)獲取該配置項(xiàng)值，如下ejs模板語(yǔ)法形式：

*注意：htmlWebpackPlugin對(duì)象首字母要小寫(xiě)

template：本地模板文件的位置，支持加載器(如handlebars、ejs、undersore、html等)，如比如

handlebars!src/index.hbs；

補(bǔ)充：

template配置項(xiàng)在html文件使用file-loader時(shí)，其所指定的位置找不到，導(dǎo)致生成的html文件內(nèi)容不是期望的內(nèi)容。

為template指定的模板文件沒(méi)有指定任何loader的話，默認(rèn)使用ejs-loader。如template:’./index.html’，若沒(méi)有為.html指定任何loader就使用ejs-loader

inject： 向template或者templateContent中注入所有靜態(tài)資源，不同的配置值注入的位置不經(jīng)相同。

true或者body：所有JavaScript資源插入到body元素的底部

head: 所有JavaScript資源插入到head元素中

false： 所有靜態(tài)資源css和JavaScript都不會(huì)注入到模板文件中

hash： true|false，是否為所有注入的靜態(tài)資源添加webpack每次編譯產(chǎn)生的唯一hash值，添加hash形式如下所示：

html

chunks：允許插入到模板中的一些chunk，不配置此項(xiàng)默認(rèn)會(huì)將entry中所有的thunk注入到模板中。在配置多個(gè)頁(yè)面時(shí)，每個(gè)頁(yè)面注入的thunk應(yīng)該是不相同的，需要通過(guò)該配置為不同頁(yè)面注入不同的thunk，如下：

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

showErrors： true|false，默認(rèn)true；是否將錯(cuò)誤信息輸出到html頁(yè)面中。這個(gè)很有用，在生成html文件的過(guò)程中有錯(cuò)誤信息，輸出到頁(yè)面就能看到錯(cuò)誤相關(guān)信息便于調(diào)試。

常用配置項(xiàng)模板

new HtmlWebpackPlugin({

title:'rd平臺(tái)',

template: 'entries/index.html', // 源模板文件

filename: './index.html', // 輸出文件【注意：這里的根路徑是module.exports.output.path】

showErrors: true,

inject: 'body',

chunks: ["common",'index']

})

配置多個(gè)html頁(yè)面

說(shuō)明：每配置一個(gè)頁(yè)面就要新建一個(gè)new HtmlWebpackPlugin({ })所以有必要將里面的配置項(xiàng)提取到一個(gè)公共方法里作為參數(shù)傳入，如下：

function getHtmlPlugin(pageName) {

return {

template:'./src/view/'+pageName+'.html',

filename:'view/'+pageName+'.html',

inject:true,

hash:true,

chunks:['common',pageName]

};

};

提取html文件共有的模板

安裝html-loader；

在原HTML文件模板需要插入提取出來(lái)的模板的地方使用ejs語(yǔ)法require提取出來(lái)的模板；

加粗 Ctrl + B

斜體 Ctrl + I

引用 Ctrl + Q

插入鏈接 Ctrl + L

插入代碼 Ctrl + K

插入圖片 Ctrl + G

提升標(biāo)題 Ctrl + H

有序列表 Ctrl + O

無(wú)序列表 Ctrl + U

橫線 Ctrl + R

撤銷(xiāo) Ctrl + Z

重做 Ctrl + Y

總結(jié)

以上是生活随笔為你收集整理的html-webpack-plugin 多页面,html-webpack-plugin的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。