詳解html-webpack-plugin插件(用法總結(jié))
html-webpack-plugin 插件是用于編譯 Webpack 項(xiàng)目中的 html 類型的文件,如果直接將 html 文件置于 ./src 目錄中,用 Webpack 打包時(shí)是不會(huì)編譯到生產(chǎn)環(huán)境中的。因?yàn)?Webpack 編譯任何文件都需要基于配置文件先行配置的。
Webpack 插件使用三步曲:安裝>引入>配置
npm 安裝
npm install --save-dev html-webpack-plugin
yarn 安裝
yarn add html-webpack-plugin --dev
html-webpack-plugin 入口未定義時(shí)
//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ù),但它基于這個(gè)原則 Entrypoint undefined = index.html 當(dāng)未定義此插件的入口時(shí),默認(rèn)為 index.html,輸出同樣是 index.html。
所以未定義入口時(shí),不論 ./src 下有任何名稱的 html 文件都不會(huì)被打包處理,但是會(huì)默認(rèn)輸出 index.html 文件。
html-webpack-plugin 中任何自定義參數(shù)設(shè)置都會(huì)覆蓋默認(rèn)值
簡單定義一個(gè)入口(在參數(shù)對象的 template 字段中設(shè)置)看看效果:
./src/index.html 中有這個(gè)文件
<!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時(shí),默認(rèn)輸出為 index.html, 輸出文件名通過 `filename` 字段設(shè)置
template指定你生成的文件所依賴哪一個(gè)html文件模板,模板類型可以是html、jade、ejs等。但是要注意的是,如果想使用自定義的模板文件的時(shí)候,你需要安裝對應(yīng)的loader。
當(dāng)配置了 html 文件的出口 filename 時(shí)
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 模板文件的時(shí)候生效,即只在使用默認(rèn)輸出文件index.html 的時(shí)候,title 設(shè)置才有用,否則它的值,會(huì)被你指定的 template 文件的title所覆蓋,title 默認(rèn)值為 Webpack App
favicon
'./somepath/favicon.ico',它的值是你的 favicon.ico 圖標(biāo)的路徑
inject的四個(gè)值: 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文件,這個(gè)幾乎不會(huì)用到的
其中 body 和 head 為字符串類型需要加引號(hào),false和true為 Boolean 類型值
minify 的值是一個(gè)對象,設(shè)置壓縮屬性
plugins: [ new HtmlWebpackPlugin({ ... minify: { removeAttributeQuotes: true // 移除屬性的引號(hào) } }) ]
- hash:布爾值,用于清除緩存
- cache: 布爾值, 指定文件要不要緩存
- showErrors:布爾值,將錯(cuò)誤信息寫入HTML頁面
- meta: {} 值是對象,設(shè)置元信息
meta:{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
xhtml
一個(gè)布爾值,默認(rèn)值是 false ,如果為 true ,則以兼容 xhtml 的模式引用文件。
chunks
chunks主要用于多入口文件,當(dāng)你有多個(gè)入口文件,那就回編譯后生成多個(gè)打包后的文件,那么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 選項(xiàng),那么默認(rèn)html 文件會(huì)引入所有的 entry 里面的js文件
excludeChunks
和 Chunks
作用是一樣的,值也都是數(shù)組形式,對多入口js進(jìn)行選擇
排除掉一些js
excludeChunks: ['devor.js'] // 等價(jià)于上面的
xhtml
一個(gè)布爾值,默認(rèn)值是 false ,如果為 true ,則以兼容 xhtml 的模式引用文件。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼
關(guān)鍵詞高亮想必大家對它都不陌生吧,應(yīng)用也比較廣泛的,下面為大家介紹下通過javascript是如何實(shí)現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示2014-04-04微信小程序?qū)崿F(xiàn)計(jì)算器(含歷史記錄)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)算器,含歷史記錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09微信小程序?qū)崙?zhàn)之網(wǎng)易云音樂歌曲詳情頁實(shí)現(xiàn)代碼
本文給大家介紹了微信小程序?qū)W習(xí)記錄之網(wǎng)易云音樂歌曲詳情頁代碼實(shí)現(xiàn),代碼分為html、css和js部分,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05SelectPage v2.4 發(fā)布新增純下拉列表和關(guān)閉分頁功能
下拉分頁選擇插件 SelectPage v2.4 發(fā)布了,新增純下拉列表和關(guān)閉分頁功能,下面通過本文給大家啊介紹SelectPage的相關(guān)知識(shí),感興趣的的朋友一起看看吧2017-09-09JS數(shù)組array元素的添加和刪除方法代碼實(shí)例
這篇文章主要介紹了JS數(shù)組array元素的添加和刪除方法代碼實(shí)例,本文直接給出操作代碼實(shí)例,需要的朋友可以參考下2015-06-06BootStrap modal模態(tài)彈窗使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap modal模態(tài)彈窗使用小結(jié),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10