概念
HTML Webpack Plugin這是一個webpack插件，它簡化了HTML文件的創建，以服務於你的webpack bundle。這對於在文件名中包含哈希的webpack包特別有用，因為文件名會改變每次編譯。您可以讓插件為您生成一個HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的載入器。
安裝
針對webpack的版本，需要安裝對應不同的版本。
webpack4
npm i --save-dev html-webpack-plugin@4webpack5
npm i --save-dev html-webpack-plugin使用
這個插件會為你生成一個HTML5文件，其中包含了使用script標籤的所有webpack的bundle。
只需將插件添加到webpack配置中，如下所示：
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: "./src/index.js",
output: {
filename:"index_bundle.js",
path: path.resolve(__dirname,"dist")
},
plugins: [
new HtmlWebpackPlugin()
]
}這將生成一個包含以下內容的文件dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>如果您有多個webpack入口點，它們都將與script標籤一起包含在生成的HTML中。
如果你在webpack的輸出中有任何CSS資產(例如，用mini-css-extract-plugin提取的CSS)，那麼這些將包含在HTML頭部的標籤中。
如果你有使用它的插件，html-webpack-plugin應該在任何集成插件之前。
選項
你可以傳遞一個配置選項到html-webpack-plugin。允許的值如下：
- title
類型：String
默認值：Webpack App
描述：要用於生成的HTML文檔的標題。
- filename
類型：String或Function
默認值：index.html
描述：要寫入HTML的文件的文件名。默認為index.html。您也可以在這裡指定一個子目錄(例如:assets/admin.html)。佔位符[name]將被條目名稱替換。也可以是一個函數，例如(entryName) => entryName + ‘.html’。
- template
類型：String
默認值：空
描述：默認情況下，它將使用src/index.ejs(如果存在的話)。
- templateContent
類型：string|Function|false
默認值：false
描述：可以用來代替模板提供一個內聯模板。
- templateParameters
類型：Boolean|Object|Function
默認值：false
描述：允許覆蓋模板中使用的參數。
- inject
類型：Boolean|String
默認值：true
描述：true || ‘head’ || ‘body’ || false將所有資產注入到給定的模板或templateContent中。當傳遞’body’時，所有javascript資源將被放置在body元素的底部。’head’將把腳本放置在head元素中。設置為true時，將根據scriptLoading選項，決定是把腳本添加到head還是body中。使用false禁用自動注入。
- publicPath
類型：String|’auto’
默認值：auto
描述：publicPath屬性值用於script和link 標籤。
- scriptLoading
類型：blocking|defer
默認值：defer
描述：現代瀏覽器支持非阻塞javascript載入(「defer」)，以提高頁面啟動性能。
- favicon
類型：String
默認值：空
描述：將給定的圖標路徑添加到輸出的HTML中。
- meta
類型：Object
默認值：{}
描述：允許注入meta標籤。例如:meta: {viewport: ‘width=device-width, initial-scale=1, shrink-to-fit=no’}。
- base
類型：Object|String|false
默認值：false
描述：注入一個base標籤。如base:「
https://example.com/path/page.html
- minify
類型：Boolean|Object
默認值：如果mode為’production’則為true，否則為false
描述：控制是否以及以何種方式壓縮輸出。
- hash
類型：Boolean
默認值：false
描述：如果為true，則附加一個唯一的webpack編譯哈希到所有包含的腳本和CSS文件。這對於緩存銷毀是很有用的
- cache
類型：Boolean
默認值：true
描述：只有當文件被更改時，才會刪除它。
- showErrors
類型：Boolean
默認值：true
描述：錯誤的詳細信息將寫入HTML頁面。
- chunks
類型：?
默認值：?
描述：只允許添加一些chunk(例如：只添加unit-test 的chunk)
- chunksSortMode
類型：String|Function
默認值：auto
描述：允許控制塊在包含到HTML之前應該如何排序。允許的值是’none’ | ‘auto’ | ‘manual’ | {Function}。
- excludeChunks
類型：Array.<string>
默認值：空
描述：允許你跳過一些chunk(例如不添加unit-test 的chunk)。
- xhtml
類型：Boolean
默認值：false
描述：如果為true，則將link標籤呈現為自動關閉(XHTML兼容)
下面是一個webpack配置示例，演示了如何使用這些選項：
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}生成多個HTML文件
要生成多個HTML文件，請在插件數組中多次聲明插件。
配置示例：
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}編寫模板
如果默認生成的HTML不能滿足您的需要，您可以提供自己的模板。最簡單的方法是使用template選項並傳遞一個定製的HTML文件。html-webpack-plugin會自動將所有必需的CSS, JS, manifest和favicon文件注入到標記中。
配置文件的部分內容：
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
// Load a custom template (lodash by default)
template: 'index.html'
})
]模板文件index.html的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>如果您已經有一個模板載入器，您可以使用它來解析模板。請注意，如果您指定了html載入器並使用.html文件作為模板，也會發生這種情況。
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'index.hbs'
})
]您可以使用現成的lodash語法。如果inject特性不適合你的需要，而你又想完全控制資產的位置，可以使用html-webpack-template項目的默認模板作為你自己編寫模板的起點。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/255760.html
微信掃一掃 
支付寶掃一掃 
