詳解html-webpack-plugin插件(用法總結(jié))
html-webpack-plugin 插件是用于編譯 Webpack 項目中的 html 類型的文件，如果直接將 html 文件置于 ./src 目錄中，用 Webpack 打包時是不會編譯到生產(chǎn)環(huán)境中的。因為 Webpack 編譯任何文件都需要基于配置文件先行配置的。
Webpack 插件使用三步曲：安裝>引入>配置
npm 安裝
npm install --save-dev html-webpack-plugin
yarn 安裝
yarn add html-webpack-plugin --dev
html-webpack-plugin 入口未定義時
//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
home: path.resolve(__dirname, './src/app.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
new htmlWebpackPlugin()
]
}
輸出的 html 文件為：dist/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="home.js"></script></body> </html>
此 webpack.config.js 配置文件，是最簡用法 html-webpack-plugin 甚至未傳遞任何參數(shù)，但它基于這個原則 Entrypoint undefined = index.html 當(dāng)未定義此插件的入口時，默認(rèn)為 index.html,輸出同樣是 index.html。
所以未定義入口時，不論 ./src 下有任何名稱的 html 文件都不會被打包處理，但是會默認(rèn)輸出 index.html 文件。
html-webpack-plugin 中任何自定義參數(shù)設(shè)置都會覆蓋默認(rèn)值
簡單定義一個入口（在參數(shù)對象的 template 字段中設(shè)置）看看效果：
./src/index.html 中有這個文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test">html webpack plugin</div> </body> </html>
webpack.config.js 增加 template 字段
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
home: path.resolve(__dirname, './src/app.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html'//只增加了這行
})
]
}
打包結(jié)果是 dist/home.js 和 dist/index.html 其中 html 文件內(nèi)容如下，和之前src文件中創(chuàng)建的完全一樣，證明自定義入口生效，且覆蓋了默認(rèn)入口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test">html webpack plugin</div> </body> </html>
template: './src/index2.html' 這里，template 的值就是 html 文件的入口，相當(dāng)于js文件的 entry 字段的作用，只設(shè)置 template時，默認(rèn)輸出為 index.html, 輸出文件名通過 `filename` 字段設(shè)置
template指定你生成的文件所依賴哪一個html文件模板，模板類型可以是html、jade、ejs等。但是要注意的是，如果想使用自定義的模板文件的時候，你需要安裝對應(yīng)的loader。
當(dāng)配置了 html 文件的出口 filename 時
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
home: path.resolve(__dirname, './src/app.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
new htmlWebpackPlugin({
template: './src/index2.html',
filename: 'index.output.html'
})
]
}
輸出為 dist/home.js 和 dist/index.output.html
同 webpack.config.js 配置文件的 output 屬性的 filename 字段一樣，htmlWebpackPlugin({})的filname 字段也可以在其值加文件夾實(shí)現(xiàn)分類
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
home: path.resolve(__dirname, './src/app.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
new htmlWebpackPlugin({
template: './src/index2.html',
filename: './category/index.output.html'
})
]
}
輸出為 dist/home.js 和 dist/category/index.output.html
title 字段，只有未定義 template 模板文件的時候生效，即只在使用默認(rèn)輸出文件index.html 的時候，title 設(shè)置才有用，否則它的值，會被你指定的 template 文件的title所覆蓋，title 默認(rèn)值為 Webpack App
favicon
'./somepath/favicon.ico',它的值是你的 favicon.ico 圖標(biāo)的路徑
inject的四個值： true body head false 指定在何處（body or head）引入 script 文件
- true 默認(rèn)值，script標(biāo)簽位于html文件的 body 底部
- body script標(biāo)簽位于html文件的 body 底部
- head script標(biāo)簽位于html文件的 head中
- false 不插入生成的js文件，這個幾乎不會用到的
其中 body 和 head 為字符串類型需要加引號，false和true為 Boolean 類型值
minify 的值是一個對象，設(shè)置壓縮屬性
plugins: [
new HtmlWebpackPlugin({
...
minify: {
removeAttributeQuotes: true // 移除屬性的引號
}
})
]
- hash：布爾值，用于清除緩存
- cache: 布爾值, 指定文件要不要緩存
- showErrors：布爾值，將錯誤信息寫入HTML頁面
- meta： {} 值是對象，設(shè)置元信息
meta：{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
xhtml
一個布爾值，默認(rèn)值是 false ，如果為 true ,則以兼容 xhtml 的模式引用文件。
chunks
chunks主要用于多入口文件，當(dāng)你有多個入口文件，那就回編譯后生成多個打包后的文件，那么chunks 就能選擇你要使用那些js文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
devor: path.resolve(__dirname, './src/devor.js'),
main: path.resolve(__dirname, './src/main.js')
}
plugins: [
new httpWebpackPlugin({
chunks: ['index','main']
})
]
那么編譯后：
<script type=text/javascript src="index.js"></script> <script type=text/javascript src="main.js"></script>
如果你沒有設(shè)置 chunks 選項，那么默認(rèn)html 文件會引入所有的 entry 里面的js文件
excludeChunks 和 Chunks作用是一樣的，值也都是數(shù)組形式，對多入口js進(jìn)行選擇
排除掉一些js
excludeChunks: ['devor.js'] // 等價于上面的
xhtml
一個布爾值，默認(rèn)值是 false ，如果為 true ,則以兼容 xhtml 的模式引用文件。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中this關(guān)鍵字用法實(shí)例分析
這篇文章主要介紹了JavaScript中this關(guān)鍵字用法,結(jié)合實(shí)例形式總結(jié)分析了javascript中this關(guān)鍵字在不同條件下的指向問題與相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
layer關(guān)閉當(dāng)前窗口頁面以及確認(rèn)取消按鈕的方法
今天小編就為大家分享一篇layer關(guān)閉當(dāng)前窗口頁面以及確認(rèn)取消按鈕的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在Web關(guān)閉頁面時發(fā)送Ajax請求的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于如何在Web關(guān)閉頁面時發(fā)送Ajax請求的實(shí)現(xiàn)方法，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
前端canvas實(shí)現(xiàn)電子簽約完成線上簽署功能
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來越多采用電子簽約的方式進(jìn)行,好處不用多說節(jié)約成本,節(jié)約時間,下面我們來看看使用canvas實(shí)現(xiàn)電子簽約完成線上簽署功能2025-01-01
原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果
這篇文章主要介紹了通過原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果,需要的朋友可以參考下2014-06-06
layui當(dāng)點(diǎn)擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子
今天小編就為大家分享一篇layui當(dāng)點(diǎn)擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JavaScript同源策略和跨域訪問,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript同源策略與跨域訪問的原理、實(shí)現(xiàn)、使用方法及相關(guān)注意事項,需要的朋友可以參考下2018-04-04
在 JavaScript 的嚴(yán)格模式下，對 JavaScript 的寫法做了一些限制。如果在嚴(yán)格模式下違反了這些限制，代碼就會報錯，對javascript嚴(yán)格模式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-11-11
直接用ID屬性進(jìn)行引用 直接用NAME屬性進(jìn)行引用 使用getElementById(),getElementsByName(),getElementsByTagName()進(jìn)行引用2009-06-06
這篇文章主要介紹了對Web開發(fā)中前端框架與前端類庫的一些思考,本文講解了前端框架的理解誤區(qū)、前端框架與前端類庫的區(qū)別、前端MVC框架思想等內(nèi)容,需要的朋友可以參考下2015-03-03