在webpack-dev-server中實作自動更新頁面

下面我就為大家分享一篇webpack-dev-server自動更新頁面方法，具有很好的參考價值，希望對大家有幫助。

這兩天在看webpack，今天卡在webpack-dev-server上了，折騰了一下午，一直無法正常運行，每次伺服器也提示正常啟動了，但是瀏覽器一輸入localhose: 8080/admin就提示Get/...,反正就是無法開啟頁面。最後找到一個帖子，發現原來是我啟動伺服器的程式碼有問題。

先安裝webpack相關元件

cnpm i webpack-dev-server --save-dev
cnpm i webpack --save-dev

程式碼如下：

# #1.專案架構如下：

 

#2.webpack.config.js設定檔

因為我定義了兩個js，所以入口這邊要定義兩個名稱分別打包成兩個bundle.js。 。 。 。 。

因為動態產生的檔案都是放在dist資料夾的，所以下面publicPath:"/dist/"就是用來監聽該資料夾中檔案變化的，只要這裡面文件內容改變了（其實是手動更新admin和customer資料夾下的index.js,它會自動更新對應的bundle.js），頁面也會自動更新。

3.package.json設定

這邊只要注意一下"server":"webpack -dev-server --inline --content-base"才是啟動伺服器的正確程式碼，

我之前是用的下面這三種方式（這種方式應該是之前舊版的，現在2.0以上版本好像不支援了，沒有去查閱這方面），

"server":"webpack-dev-server --inline --hot",

"server":"webpack-dev-server --inline",



"server":"webpack-dev-server"

#4.執行指令

先輸入「npm start」 產生兩個bundle.js

其次輸入「npm run server」或「webpack-dev-server --inline --content-base」

最後開啟瀏覽器輸入localhose:8080/admin或localhose:8080/customer就可以開啟對應的頁面

##5.最後修改對應頁面的js程式碼，頁面也會自動同步立即更新

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在bootstrap中如何實作table支援高度百分比

在vue 2.x 中使用axios如何封裝的get 和post方法

使用node應用程式中timing-attack存在哪些安全漏洞

以上是在webpack-dev-server中實作自動更新頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！