express和webpack配合時(shí)熱刷新出錯(cuò)的解決方法

出錯(cuò)

[WDS] App updated. Recompiling...
bundle.js:635 [WDS] Disconnected!
log @ bundle.js:635
bundle.js:631 [WDS] Hot Module Replacement enabled.
bundle.js:631 [WDS] App hot update...
bundle.js:8453 [HMR] Checking for updates on the server...

原因

不能使用nodemon或者supervisor去啟動(dòng)webpack-dev-server

之前因?yàn)榘裡xpress服務(wù)和webpack-dev-server在同一個(gè)server.js里啟動(dòng),然后執(zhí)行nodemon server.js,然后發(fā)現(xiàn)出錯(cuò)信息刷钢。

折騰了好久泽铛,google直秆、百度邑狸、問(wèn)人诡必、還去github提issue伍派,最后還是靠自己解決了江耀。

具體原因是因?yàn)?strong>nodemon是重啟整個(gè)進(jìn)程的,如果用nodemon來(lái)啟動(dòng)webpack诉植,那么這樣的話(huà)會(huì)使webpack丟失某些存在內(nèi)存中的東西祥国,所以不建議使用nodemon來(lái)啟動(dòng)webpack

詳細(xì)可以看webpack-hot-middleware的issue

解決方法

  1. 把express server和webpack-dev-server分開(kāi)

server.js(express server)

const proxy = require('proxy-middleware')
const url = require('url')
const express = require('express')
const app = express()

app.get('/',function(req,res){
  res.sendFile(__dirname+'/src/html/index.html');
})
app.listen(3001)
app.use('/build',proxy(url.parse('http://localhost:3000/build')))

webpack.server.js

const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.config')
const compiler = webpack(config)

new WebpackDevServer(compiler, {
  publicPath: config.output.publicPath,
  inline:true,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:3000/')
});
  1. 分別用nodemon和node啟動(dòng)

終端1

nodemon server.js

終端2

node webpack-dev-server

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末晾腔,一起剝皮案震驚了整個(gè)濱河市舌稀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌灼擂,老刑警劉巖壁查,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異剔应,居然都是意外死亡睡腿,警方通過(guò)查閱死者的電腦和手機(jī)语御,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)席怪,“玉大人应闯,你說(shuō)我怎么就攤上這事」夷恚” “怎么了碉纺?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)刻撒。 經(jīng)常有香客問(wèn)我骨田,道長(zhǎng),這世上最難降的妖魔是什么声怔? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任态贤,我火速辦了婚禮,結(jié)果婚禮上醋火,老公的妹妹穿的比我還像新娘抵卫。我一直安慰自己,他們只是感情好胎撇,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著殖氏,像睡著了一般晚树。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上雅采,一...
    開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1 284
  • 那天爵憎,我揣著相機(jī)與錄音,去河邊找鬼婚瓜。 笑死宝鼓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的巴刻。 我是一名探鬼主播愚铡,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼胡陪!你這毒婦竟也來(lái)了沥寥?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤柠座,失蹤者是張志新(化名)和其女友劉穎邑雅,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體妈经,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡淮野,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年捧书,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片骤星。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡经瓷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出妈踊,到底是詐尸還是另有隱情了嚎,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布廊营,位于F島的核電站歪泳,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏露筒。R本人自食惡果不足惜呐伞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望慎式。 院中可真熱鬧伶氢,春花似錦、人聲如沸瘪吏。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)掌眠。三九已至蕾盯,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蓝丙,已是汗流浹背级遭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留渺尘,地道東北人挫鸽。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像鸥跟,于是被迫代替她去往敵國(guó)和親丢郊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 在現(xiàn)在的前端開(kāi)發(fā)中锌雀,前后端分離蚂夕、模塊化開(kāi)發(fā)、版本控制腋逆、文件合并與壓縮婿牍、mock數(shù)據(jù)等等一些原本后端的思想開(kāi)始...
    Charlot閱讀 5,431評(píng)論 1 32
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本號(hào) vue-c...
    tengrl閱讀 3,634評(píng)論 0 0
  • 構(gòu)建一個(gè)小項(xiàng)目——FlyBird,學(xué)習(xí)webpack和react惩歉。(本文成文于2017/2/25) 從webpac...
    布蕾布蕾閱讀 16,801評(píng)論 31 98
  • 前兩部分我們已經(jīng)完成了博客頁(yè)面的展示和后臺(tái)頁(yè)面的展示: React技術(shù)棧+Express+Mongodb實(shí)現(xiàn)個(gè)人博...
    SamDing閱讀 5,449評(píng)論 1 12
  • 傳說(shuō)中等脂,在山與海的彼端有一片大陸俏蛮,大陸中央是一個(gè)繁華的城鎮(zhèn),稱(chēng)作“繁書(shū)”上遥,是根據(jù)“大道至繁”取的名字搏屑。 城里的人生...
    風(fēng)吹衣袖閱讀 801評(píng)論 45 31