淺析html webpack plugin外掛的使用教程

佚名發表於2020-05-19
HTMLWebPlugin

用html-webpack-plugin外掛來啟動頁面 可將html頁面放入記憶體 以提升頁面的載入速度
並且還能自動設定index.html頁面中JS檔案引入的路徑

使用前提：專案中安裝了Webpack使用步驟：

步驟一、在專案的根目錄下輸入cnpm i html-webpack-plugin -D 將html-webpack-plugin外掛安裝到開發依賴
其作用是根據指定的模板頁面在記憶體中生成相應的HTML頁面

在這裡插入圖片描述

步驟二、外掛安裝之後 修改webpack.config.js的配置檔案

在配置檔案中匯入html-webpack-plugin外掛 並配置模板頁路徑和生成的頁面名稱即可

const path=require("path")
// 匯入html-webpack-plugin
const htmlWebpackPlugin=require("html-webpack-plugin")
 
module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 配置外掛節點
    plugins:[
        // 建立html-webpack-plugin外掛
        new htmlWebpackPlugin({ // 設定引數
            template:path.join(__dirname,"./src/index.html"), // 指定模板頁面 以根據指定頁面生成記憶體中的頁面
            filename:"index.html" // 指定生成的記憶體中的頁面的名稱
        })
    ]
}

使用了html-webpack-plugin外掛之後 就無需手動處理bundle.js的引用路徑了
因為 在生成後的記憶體中的HTML頁面裡 已經自動引入了bundle.js的正確路徑

總結 - 外掛的作用：

1、自動根據指定的頁面生成一個在記憶體中的頁面

2、自動在頁面中引入打包好的bundle.js

到此這篇關於淺析html webpack plugin外掛的使用教程的文章就介紹到這了

相關文章