使用html-webpack-plugin插件來(lái)啟動(dòng)頁(yè)面 可將html頁(yè)面放入內(nèi)存 以提升頁(yè)面的加載速度
并且還能自動(dòng)設(shè)置index.html頁(yè)面中JS文件引入的路徑

使用前提：項(xiàng)目中安裝了Webpack使用步驟：

步驟一、在項(xiàng)目的根目錄下輸入cnpm i html-webpack-plugin -D 將html-webpack-plugin插件安裝到開(kāi)發(fā)依賴(lài)
其作用是根據(jù)指定的模板頁(yè)面在內(nèi)存中生成相應(yīng)的HTML頁(yè)面

步驟二、插件安裝之后 修改webpack.config.js的配置文件

在配置文件中導(dǎo)入html-webpack-plugin插件 并配置模板頁(yè)路徑和生成的頁(yè)面名稱(chēng)即可

const path=require("path")// 導(dǎo)入html-webpack-pluginconst htmlWebpackPlugin=require("html-webpack-plugin")module.exports={    entry:path.join(__dirname,"./src/main.js"),    output:{        path:path.join(__dirname,"./dist"),        filename:"bundle.js"    },    // 配置插件節(jié)點(diǎn)    plugins:[        // 創(chuàng)建html-webpack-plugin插件        new htmlWebpackPlugin({ // 設(shè)置參數(shù)            template:path.join(__dirname,"./src/index.html"), // 指定模板頁(yè)面 以根據(jù)指定頁(yè)面生成內(nèi)存中的頁(yè)面            filename:"index.html" // 指定生成的內(nèi)存中的頁(yè)面的名稱(chēng)        })    ]}

使用了html-webpack-plugin插件之后 就無(wú)需手動(dòng)處理bundle.js的引用路徑了
因?yàn)?在生成后的內(nèi)存中的HTML頁(yè)面里 已經(jīng)自動(dòng)引入了bundle.js的正確路徑

總結(jié) - 插件的作用：

1、自動(dòng)根據(jù)指定的頁(yè)面生成一個(gè)在內(nèi)存中的頁(yè)面

2、自動(dòng)在頁(yè)面中引入打包好的bundle.js

到此這篇關(guān)于淺析html webpack plugin插件的使用教程的文章就介紹到這了,更多相關(guān)html webpack plugin插件內(nèi)容請(qǐng)搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持武林網(wǎng)！