淺析html webpack plugin插件的使用教程

使用html-webpack-plugin插件來啟動(dòng)頁面 可將html頁面放入內(nèi)存 以提升頁面的加載速度
并且還能自動(dòng)設(shè)置index.html頁面中JS文件引入的路徑
使用前提:項(xiàng)目中安裝了Webpack使用步驟:
步驟一、在項(xiàng)目的根目錄下輸入cnpm i html-webpack-plugin -D
將html-webpack-plugin插件安裝到開發(fā)依賴
其作用是根據(jù)指定的模板頁面在內(nèi)存中生成相應(yīng)的HTML頁面
步驟二、插件安裝之后 修改webpack.config.js的配置文件
在配置文件中導(dǎo)入html-webpack-plugin插件 并配置模板頁路徑和生成的頁面名稱即可
const path=require("path") // 導(dǎo)入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" }, // 配置插件節(jié)點(diǎn) plugins:[ // 創(chuàng)建html-webpack-plugin插件 new htmlWebpackPlugin({ // 設(shè)置參數(shù) template:path.join(__dirname,"./src/index.html"), // 指定模板頁面 以根據(jù)指定頁面生成內(nèi)存中的頁面 filename:"index.html" // 指定生成的內(nèi)存中的頁面的名稱 }) ] }
使用了html-webpack-plugin插件之后 就無需手動(dòng)處理bundle.js的引用路徑了
因?yàn)?在生成后的內(nèi)存中的HTML頁面里 已經(jīng)自動(dòng)引入了bundle.js的正確路徑
總結(jié) - 插件的作用:
1、自動(dòng)根據(jù)指定的頁面生成一個(gè)在內(nèi)存中的頁面
2、自動(dòng)在頁面中引入打包好的bundle.js
到此這篇關(guān)于淺析html webpack plugin插件的使用教程的文章就介紹到這了,更多相關(guān)html webpack plugin插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用html-webpack-plugin'入再內(nèi)存中生成 html 頁面插件
這篇文章主要介紹了使用html-webpack-plugin'入再內(nèi)存中生成 html 頁面插件,需要的朋友可以參考下2019-04-02- 這篇文章主要介紹了html-webpack-plugin使用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-15