1. <dd id="erndk"></dd>
                1. 第四十九篇:webpack的基本使用(三) --安裝和配置html-webpack-plugin插件

                  互聯網 2022/1/4 6:07:46

                  好家伙,1.html-webpack-plugin的作用講一下為什么需要這個插件 存在問題:在點開locahost:8080之后出現的是項目的根目錄,而不是網頁這時候需要再點開scr文件夾才能看見index首頁 所以我們想要一進8080就能夠看到index首頁,解決方法:我們可以把index放到根目錄中, 但是這與…

                  好家伙,

                   

                  1.html-webpack-plugin的作用

                   

                  講一下為什么需要這個插件

                  存在問題:在點開locahost:8080之后出現的是項目的根目錄,而不是網頁

                   

                  這時候需要再點開scr文件夾才能看見index首頁

                  所以我們想要一進8080就能夠看到index首頁,

                   

                  解決方法:我們可以把index放到根目錄中,

                  但是這與"規范"沖突了,

                  ("規范":程序員寫的代碼必須放在src文件夾)

                   

                  所以如果我們的能夠將index復制一份,再搬運到根目錄下

                  就可以一進8080就能夠看到index首頁,

                  這也就是html-webpack-plugin插件的作用

                   

                   

                   2.安裝html-webpack-plugin插件

                  終端跑一下:

                  npm install html-webpack-plugin@5.3.2 -D

                   

                   

                  3.配置html-webpack-plugin

                  在webpack.config.js中進行配置:

                   

                   // 1.導入 HTML 插件,得到一個構造函數
                  const HtmlPlugin = require('html-webpack-plugin')
                  
                   // 2.創建 HTML 插件的實例對象
                  const htmlPlugin = new HtmlPlugin({
                      template: './src/index.html',// 指定原文件的存放路徑
                      filename:'./index.html',// 指定生成的文件的存放路徑
                  })
                  
                  module.exports={
                  
                    mode: 'development',
                  
                    plugins: [htmlPlugin],// 3. 通過 plugins 節點,使 htmlPlugin 插件生效,webpack在運行時,會加載并調用這些插件
                  
                  }

                  配置完后重新npm run dev

                  進入locahost:8080就可以直接看見index首頁了

                   

                  補充:html-webpack-plugin插件會把復制件放到內存中,所以是在根目錄中看不見的.

                   

                   

                  That's all

                   

                  隨時隨地學軟件編程-關注百度小程序和微信小程序
                  關于找一找教程網

                  本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
                  本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章,希望廣大程序員努力學習,讓我們用科技改變世界。
                  [第四十九篇:webpack的基本使用(三) --安裝和配置html-webpack-plugin插件]http://www.yachtsalesaustralia.com/tech/detail-279753.html

                  贊(0)
                  關注微信小程序
                  程序員編程王-隨時隨地學編程

                  掃描二維碼或查找【程序員編程王】

                  可以隨時隨地學編程啦!

                  技術文章導航 更多>
                  国产在线拍揄自揄视频菠萝

                        1. <dd id="erndk"></dd>