根據「[Vue.js] 如何建立 Vue3 + webpack5 專案範例」的內容，封裝時已經先建立目錄 dist/ ，新增 index.html，預先將 main.js 加到 script 中。
接著，以下要介紹 HtmlWebpackPlugin ，這個 webpack plugin 可以自動產生 Html，並自動將所有的 js 檔加入 script 中。下面的操作會用 vue3-webpack5-template 這個專案操作，可以先 clone下來並 npm install。
一、安裝
1
npm install html-webpack-plugin --save-dev
二、新增模板
新增 index.html ，並保留一些區域方便我們可以自訂。
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="<%= id %>"></div>
</body>
</html>
三、新增 Webpack 設定
為了突顯 HtmlWebpackPlugin 功能的強大，首先刻意將輸出的 js 檔案名稱改為 [name].[contenthash].js，這時變得無法預期編譯後的檔案名稱。
再來將 HtmlWebpackPlugin 加入 plugin，完整檔案請點連結
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
...
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html',
title: 'Getting Started',
templateParameters: {
id: 'app',
},
}),
],
};
上面共使用了三個參數：
template- 顧名思義是模板的路徑title- html 檔案的<title>
也說明為什麼在 index.html 有這一段
1
<%= htmlWebpackPlugin.options.title %>
templateParameters- 這裡傳入一個物件，將 id 訂為 app，因此模板這段程式碼，將會使用這裡的設定複寫
1
<div id="<%= id %>"></div>
若要了解更多參數的使用，可以參考文件。
四、執行
執行下面的指令開始打包
1
npm run build
程式碼已經 push 到分支 test-webpack-plugin，或者參考變更可以按這裡。