使用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-pluginconst 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插件內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章,希望大家以後多多支持武林網!