HtmlWebpackPlugin外掛和HtmlWebpackInlineSourcePlugin外掛的使用

一、HtmlWebpackPlugin

1.作用

自動建立HTML

自動建立HTML：在構建過程中自動生成一個HTML5檔案，該檔案可以包含所有webpack打包過程中生成的bundles。這意味著你不需要手動建立HTML檔案，外掛會為你處理這一切。
自動注入資源：自動將打包生成的JavaScript、CSS等檔案注入到生成的HTML檔案中，無需手動新增script或link標籤。 這一點特別有用，因為隨著使用程式碼分割等技術，輸出檔案的名稱可能會發生變化。

定製HTML模板

使用模板：HtmlWebpackPlugin允許使用自定義的HTML模板。你可以指定一個模板檔案，外掛將基於這個模板來生成最終的HTML檔案，這對於需要定製頁面結構的場景非常有用。
靈活配置：外掛提供了多種配置選項，如修改輸出的HTML檔名、壓縮HTML輸出、設定meta標籤等，使得生成的HTML檔案可以滿足不同的需求。

2.VUE使用

安裝

npm install html-webpack-plugin --save-dev

安裝後若執行報錯 可降低版本到4.0.0

vue.config.js配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    publicPath: '',//使用相對路徑
    productionSourceMap: false,
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Custom',
                filename: 'custom.html', // 輸出檔名
                template: 'public/index.html',// 模板檔案路徑
            })
        ]
    }

}

專案打包

npm run build

在dist資料夾下生成如下結構

開啟Custom.html,可見script或link標籤。

二、HtmlWebpackInlineSourcePlugin

作用

html-webpack-inline-source-plugin是一個用於Webpack的外掛，它的主要功能是在生成的HTML模板檔案中，將原本透過script和link標籤引用的外部資源（如JS和CSS）內聯到HTML文件中。這意味著你的靜態資源可以無需額外的網路請求就能立即執行或應用，極大地提高了首屏載入速度和使用者體驗。
通常與 html-webpack-plugin 一起使用

使用

安裝

npm install --save-dev html-webpack-inline-source-plugin

vue.config.js配置