Webpack學習系列 | Webpack 5 整合 HTML 外掛高效解決檔案路徑問題

語言: CN / TW / HK

時間 2022-07-25 16:55:00 部落格園-原創精華區

程式設計師優雅哥簡介：十年程式設計師，呆過央企外企私企，做過前端後端架構。分享vue、Java等前後端技術和架構。

本文摘要：主要通過實操講解運用Webpack 5 如何整合 HTML 外掛從而高效解決檔案路徑問題

在前面的學習中，我們建立了入口頁面: template/index.html ，在該檔案中手動引入了打包後的 bundle.js 檔案。如果打包路徑修改了，index.html 中也需要修改 bundle.js 的檔案路徑，很不方便。其實這些工作，webpack 提供了對應的外掛幫助我們完成： html-webpack-plugin 。

1 安裝依賴

安裝 html-webpack-plugin 為開發依賴：

yarn add html-webpack-plugin -D

2 修改 webpack 配置

修改 webpack.config.js 檔案：

首頁引入該外掛：

const HtmlWebpackPlugin = require('html-webpack-plugin')

然後在 plugins 節點陣列中新增該外掛

plugins: [
    ...
    new HtmlWebpackPlugin()
  ],

3 測試執行

上面配置外掛時只建立了物件，沒有傳入任何引數。先執行 yarn build 打包。這時候會發現 dist 目錄下多了一個 index.html。這個 index.html 並不是我們編寫的 template/index.html 檔案，而只是一個空檔案，裡面引入了打包後的 bundle.js 檔案。

4 其他說明

4.1 使用自定義模板

如果要使用我們自己編寫的index.html 檔案，可以通過 HtmlWebpackPlugin 的引數指定。

plugins: [
    ...
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'template/index.html')
    })
  ],

在template/index.html 檔案中，我們無需手動引入 dist/js/bundle.js ，webpack 會打包時完成對 bundle.js 的引入。

再次執行 yarn build 打包，會發現新生成的 dist/index.html 檔案保留了 template/index.html 的內容，同時還自動引入了打包後的 bundle.js 檔案。在瀏覽器中訪問 dist/index.html，介面和控制檯都正常顯示。

4.2 壓縮 HTML

使用了 html-webpack-plugin 外掛，在開發模式下（mode: development）打包後的 HTML 檔案不會被壓縮。但在生產模式下（mode: production），打包後的 HTML 檔案會被自動壓縮。

今日優雅哥（\/ : youyacoder）學習結束，期待關注留言分享~~

「其他文章」