中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

webpack-dev-server自動更新頁面方法

發布時間:2020-10-24 10:12:10 來源:腳本之家 閱讀:239 作者:litterWebDesinger 欄目:web開發

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

先安裝webpack相關組件

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

代碼如下:

1.項目結構如下:

webpack-dev-server自動更新頁面方法 

2.webpack.config.js配置文件

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

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

webpack-dev-server自動更新頁面方法

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"

webpack-dev-server自動更新頁面方法

4.執行命令

首先輸入 “npm start” 生成兩個bundle.js

其次輸入 “npm run server”或者“webpack-dev-server --inline --content-base”

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

webpack-dev-server自動更新頁面方法

5.最后修改對應頁面的js代碼,頁面也會自動同步立即更新

webpack-dev-server自動更新頁面方法

以上這篇webpack-dev-server自動更新頁面方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

二连浩特市| 云浮市| 浪卡子县| 敦化市| 平度市| 丰顺县| 临泽县| 绵竹市| 马龙县| 利辛县| 论坛| 中山市| 锦州市| 三原县| 正阳县| 视频| 乌兰县| 蚌埠市| 绥阳县| 吉木萨尔县| 宜黄县| 东兰县| 兴安县| 边坝县| 临夏市| 达日县| 夏河县| 加查县| 黔江区| 丰都县| 保康县| 金湖县| 晋城| 金沙县| 鹤岗市| 铁力市| 武强县| 永善县| 绥中县| 中西区| 龙游县|