Webpack學習系列 | Webpack 5 內建 HTML 插件高效解決檔案路徑問題

主要通過實操講解運用Webpack 5 如何內建 HTML 插件進而高效解決檔案路徑問題

程式員優雅哥簡介：十年程式員，呆過央企外企私企，做過前端後端架構。分享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）學習結束，期待關注留言分享~~