Webpack 5 走起! - plugins(3) - html-webpack-plugin

前言

webpack 雖然非常好用,但是實際開發時還是會需要安裝很多插件,因此這一篇就來講講插件。

插件

接下來我們剛才透過 webpack 生成了一個檔案叫做 main.a87486.bundle.js,一般來說,通常我們在開發網頁時,若要引入 JavaScript 都是寫 <script src="app.js"></script>,但是由於我們這邊檔案名稱會隨機生成,那麼就不能使用這種寫死的方式,而必須透過自動注入的方式將 JavaScript 注入到 HTML 中,因此我們就必須使用到插件,這邊將會使用到 html-webpack-plugin 這個插件

而這個插件主要是幫助我們來生成一個 HTML 檔案,舉凡我們要傳遞一個 title 標籤的屬性內容,因此先讓我們依照官方介紹的安裝方式來安裝插件

1
npm i --save-dev html-webpack-plugin

安裝完畢之後在 src 底下建立一個檔案與資料夾 template/index.html,內容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>您的瀏覽器不支援 JavaScript,請檢查您的瀏覽器是否支援 JavaScript 或者啟用 JavaScript。</strong>
</noscript>
<div id="app"></div>
</body>
</html>

接下來回到 webpack.config.js 加入 html-webpack-plugin 相關設置,首先在 webpack 有一個屬性是 plugins,這個屬性是一個陣列,我就會在這個陣列中加入 new HtmlWebpackPlugin({}) 的實例化物件,裡面包含了剛剛在 HTML 所撰寫 (<%= htmlWebpackPlugin.options.title %>) 要傳入的屬性 title、要指定注入的模板 template 屬性以及最後一個輸出的檔案名稱,因此完整 webpack 設置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[contenthash:6].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack 5',
template: path.resolve(__dirname, './src/template/index.html'),
filename: 'index.[contenthash:6].html',
})
]
};

接下來當你輸入 npm run dev 的時候,你就會得到一個打包後的 html,內容如下:

檔案名稱:index.13f938.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<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 5</title>
<script defer src="main.30f09f.bundle.js"></script></head>
<body>
<noscript>
<strong>您的瀏覽器不支援 JavaScript,請檢查您的瀏覽器是否支援 JavaScript 或者啟用 JavaScript。</strong>
</noscript>
<div id="app"></div>
</body>
</html>

我們可以看到剛剛我們所撰寫的 title 屬性與打包後的 script 標籤都會自己注入,透過這個套件可以達到我們所需要的自動注入,而這個概念就如同我們在使用 Vue Cli 的時候相同,Vue Cli 也會自己幫我們注入 Script 唷~

最後這邊應該會有一些人好奇以往我們在開發時,都會將 script 放在結尾 body,但是這邊插件卻是注入在 head,這樣子不會有任何問題嗎?,基本上是不會,因為該標籤有被加入一個屬性是 defer,這個屬性用途會等整個頁面都下載處理完畢之後才會執行,所以注入在 head 並不會有太大問題,但是如果是比較舊的瀏覽器,那麼就不能使用該屬性,因此如果有發生該屬性無法運作的問題,那麼可以調整一下 webpack 的插件設置就可以搞定了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[contenthash:6].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack 5',
template: path.resolve(__dirname, './src/template/index.html'),
filename: 'index.[contenthash:6].html',
inject: 'body',
})
]
};

這邊只需要增加 inject 屬性,並設置為 'body' 就可以囉~

結果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<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 5</title>
</head>
<body>
<noscript>
<strong>您的瀏覽器不支援 JavaScript,請檢查您的瀏覽器是否支援 JavaScript 或者啟用 JavaScript。</strong>
</noscript>
<div id="app"></div>
<script defer src="main.30f09f.bundle.js"></script></body>
</html>

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ