使用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插件的使用教程的文章就介紹到這了,更多相關html webpack plugin插件內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！