? ? ? ? HTML Webpack Plugin插件，在Webpack構(gòu)建的前端項目中，用于簡化index.html文件的創(chuàng)建，以免除項目打包之后手動創(chuàng)建/拷貝index.html到打包目錄下的繁瑣步驟。以下，從一個已構(gòu)建好的Vue項目中的一個現(xiàn)象談起，逐步深入了解此插件的使用。
目錄
從Vue項目中的index.html談起
Webpack：引入HTML Webpack Plugin插件
Webpack：自動導入腳本與項目打包問題
HTML Webpack Plugin插件的其它配置
?title標題
?filename文件名
?template文件模板來源
?templateContent自定義模板屬性
?templateParameters模板參數(shù)屬性
? publicPath屬性
?scriptLoading腳本加載方式屬性
?favicon圖標屬性
?mate屬性
?minify屬性
?hash哈希屬性
?showErrors屬性
從Vue項目中的index.html談起
? ? ? ? 當我們使用vue-cli構(gòu)建Vue前端應(yīng)用時，所生成的index.html基本內(nèi)容如下。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
????????請仔細觀察以上的代碼結(jié)構(gòu)，標準的html頁面骨架模板，body中包含一個用于掛載Vue實例的id選擇器值為app的DOM元素。除此之外，沒有任何JavaScript腳本的引入。
? ? ? ? 我們再看一個打包之后，位于輸出目錄下的index.html文件，內(nèi)容如下，
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="favicon.ico">
<title>cesium-viewer</title>
<link href="js/about.b241abde.js" rel="prefetch">
<link href="css/chunk-vendors.b7dbb5dd.css" rel="preload" as="style">
<link href="css/index.d52c5618.css" rel="preload" as="style">
<link href="js/chunk-vendors.b8df0be2.js" rel="preload" as="script">
<link href="js/index.224fd61e.js" rel="preload" as="script">
<link href="css/chunk-vendors.b7dbb5dd.css" rel="stylesheet">
<link href="css/index.d52c5618.css" rel="stylesheet">
</head>
<body><noscript><strong>We're sorry but cesium-viewer doesn't work properly without JavaScript enabled. Please enable it
to continue.</strong></noscript>
<div id="app"></div>
<script src="js/chunk-vendors.b8df0be2.js"></script>
<script src="js/index.224fd61e.js"></script>
</body>
</html>? ? ? ? 可以看到，打包之后自動生成的HTML文件中，自動為我們引入了兩個script標簽，用于鏈接打包生成的JavaScript腳本文件?？吹竭@里，你可能很自然的聯(lián)想到開頭部分我們提到的HTML Webpack Plugin插件，因為該插件也具備這樣的能力，這也是我們接下來想要聊的內(nèi)容。
Webpack：引入HTML Webpack Plugin插件
????????HTML Webpack Plugin插件的GitHub官網(wǎng)地址為：https://github.com/jantimon/html-webpack-plugin，介紹也很簡潔：Plugin that simplifies creation of HTML files to serve your bundles（一個服務(wù)于bundles的、用于簡化HTML文件生成的插件）。
? ? ? ? 要想在Webpack項目中引入該插件，首先要注意當前項目的Webpack版本，這一點可以從package.json文件中進行查看，如下圖所示，我的這里是webpack 5.x版本的。
? ? ? ? ?參考官網(wǎng)的介紹，使用Webpack5對應(yīng)的命令進行安裝。
# Webpack 5
npm i --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin
# Webpack 4
npm i --save-dev html-webpack-plugin@4
yarn add --dev html-webpack-plugin@4
????????雖然官網(wǎng)介紹此插件是零配置的，但是為了和我們的Webpack項目兼容，還是需要修改Webpack項目的配置文件，引入插件即可，如下所示，
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入html-webpack-plugin 插件
...
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
filename: `index.html`, //生成的文件名
template: path.resolve(__dirname, `src/index.html`), //源文件的絕對路徑
}),
]
...
}Webpack：自動導入腳本與項目打包問題
? ? ? ? 在引入HTML Webpack Plugin插件之后，再進行項目的打包操作，該插件就會自動為我們生成index.html文件，文件內(nèi)容如下，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>webpack-demo</title>
<script src="index.js"></script>
<script defer="defer" src="index.js"></script>
</head>
<body>
<div id="app"></div><input placeholder="input..."> <span class="iconfont">󰀒</span>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
</ul>
<div id="box"></div>
</body>
</html>Tips：script標簽中的defer='defer'屬性表示：告訴瀏覽器應(yīng)當立即下載/引入外部的JavaScript腳本文件，但是應(yīng)當推遲到整個HTML頁面解析完畢之后才開始執(zhí)行。注意，defer屬性只對外部的腳本文件才有效。
?????????為了進行比對，我們看一下原始的文件內(nèi)容（如下），
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack-demo</title>
<!-- <script src="./index.js"></script> -->
<!-- <script src="../dist/main.bundle.js"></script> -->
<script src="index.js"></script>
</head>
<body>
<div id="app"></div>
<input type="text" placeholder="input...">
<span class="iconfont">󰀒</span>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
</ul>
<div id="box"></div>
</body>
</html>? ? ? ? 可以看到，和Vue項目打包之后的類似，HTML Webpack Plugin步進為我們生成了index.html文件，而在還自動在文件中引入了打包之后的"index.js"入口文件。
? ? ? ? 我們嘗試將其部署在Tomcat服務(wù)器下，
? ? ? ? ?接著，啟動Tomcat服務(wù)器，并訪問/webpack-demo前端項目，打開開發(fā)者工具面板，
? ? ? ? ?似乎是出現(xiàn)了一些問題，就是我們的console.log語句被打印了兩次。
? ? ? ? 這是為什么呢？我們回放打包之后的代碼片段，發(fā)現(xiàn)index.js入口文件被引入了兩次，其中：第一個script標簽是我們在最初構(gòu)建項目時，手動引入的；第二個script標簽是HTML Webpack Plugin插件自動引入的。但是，這兩個script標簽都指向index.js入口文件。這也是導致執(zhí)行兩次的原因。
? ? ? ?其實，這一點在HTML Webpack Plugin的GitHub頁面中也有所提及，截圖如下，即：該插件會自動生成帶有script標簽的HTML文件。
? ? ? ? 所以，為了解決這個問題，我們需要將源index.html文件中的語句注釋掉，然后重新打包。
? ? ? ? ?打包之后，我們重新部署，查看執(zhí)行次數(shù)。確實只執(zhí)行了一次，問題解決。
?HTML Webpack Plugin插件的其它配置
? ? ? ? 我們繼續(xù)查看HTML Webpack Plugin插件的GitHub頁面，了解一下其它的配置項。
title標題
? ? ? ? title配置項可以為插件生成的HTML頁面配置標題內(nèi)容。
? ? ? ? 示例如下，
?filename文件名
? ? ? ? filename屬性，可以用于配置生成的HTML文件的文件名，默認為：index.html
?template文件模板來源
? ? ? ? template屬性，為其指定一個路徑（相對路徑/絕對路徑均可）?？梢杂糜谂渲酶鶕?jù)哪一個HTML文件來生成打包輸出時的HTML文件。
?templateContent自定義模板屬性
? ? ? ? templateContent屬性，用于替換template屬性，使其失效，轉(zhuǎn)為使用templateContent屬性指定的模板內(nèi)容。
? ? ? ? ?使用示例如下，
?templateParameters模板參數(shù)屬性
? ? ? ? templateParameters屬性，用于為自定義的templateContent模板源中的參數(shù)名，指定參數(shù)值。就類似于一開始為生成的HTML文件指定title標題屬性的操作，是一樣的。
? ? ? ? 使用示例如下，
publicPath屬性
? ? ? ? 此屬性用于為HTML中的script和link標簽指定父級路徑，建議使用默值auto。
?scriptLoading腳本加載方式屬性
? ? ? ? scriptLoading屬性，用于指定scirpt腳本的加載方式，默認使用defer非阻塞的加載方式。
?
?favicon圖標屬性
? ? ? ? favicon屬性，用于給頁面配置圖標。
? ? ? ? ?例如，我們要給Webpack搭建起來的Vue項目配置一個Vue的圖標，配置如下，
new HtmlWebpackPlugin({
title: `Webpack-Demo`, //標題
filename: `index.html`, //生成的文件名
template: path.resolve(__dirname, `src/index.html`), //源文件的絕對路徑
scriptLoading: 'defer', //以非阻塞的方式加載script腳本
favicon: path.resolve(__dirname, `src/favicon.ico`), //配置網(wǎng)站圖標
}),
mate屬性
? ? ? ? 用于配置HTML頁面的meta屬性，對應(yīng)Object對象類型。默認是一個空對象。
? ? ? ? ?以下是默認的meta屬性，
? ? ? ? ?以下是配置后的meta屬性，
?minify屬性
? ? ? ? minify屬性，常用于項目打包時的資源文件壓縮操作。
?hash哈希屬性
? ? ? ? ?配置之后，打包出來的外部資源會默認加上一段字符碼。
showErrors屬性
? ? ? ? 該屬性控制，是否可將錯誤的詳細信息一一個可關(guān)閉的面板形式顯示到HTML頁面中。默認開啟。
文章來源：http://www.zghlxwxcb.cn/news/detail-471937.html
?????????效果如下，
文章來源地址http://www.zghlxwxcb.cn/news/detail-471937.html
到了這里，關(guān)于Webpack：HTML Webpack Plugin插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
