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

發表於 2021-02-28 分類於 Webpack

Google AD

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

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

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

前言

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，內容如下：

<!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 設置如下

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

<!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 的插件設置就可以搞定了

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' 就可以囉~

結果如下：

<!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>

參考文獻

html-webpack-plugin