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模板語法形式：

*注意：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

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提取出來的模板；

加粗 Ctrl + B

斜體 Ctrl + I

引用 Ctrl + Q

插入鏈接 Ctrl + L

插入代碼 Ctrl + K

插入圖片 Ctrl + G

提升標題 Ctrl + H

有序列表 Ctrl + O

無序列表 Ctrl + U

橫線 Ctrl + R

撤銷 Ctrl + Z

重做 Ctrl + Y

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。