解決 webpack-dev-server 無法自動刷新畫面問題
Published in
2 min readAug 14, 2017
需求
- 自動監控 JavaScript 檔案
- 一但有更新,觸發重新打包
- 自動刷新畫面
問題
用 webpack-dev-server 跑 inline mode,但卻沒辦法自動 reload 畫面?為什麼?
解決方法
webpack.config 中, output 設定不能是絕對路徑
為什麼呢?因為 webpack-dev-server 在跑的時候並不會產生實體檔案 (產生在記憶體中),所以必須使用「相對路徑」作為輸出位置,才有辦法自動刷新畫面!
解析問題
為什麼 webpack-dev-server 可以自動觸發畫面自動刷新?
因為在打包的時候會加上 web socket,讓畫面自動刷新,你可以在 Chrome 的開發者工具裡面看到打包出來的 JavaScript 檔案會有一些端倪,例如:
var debug = function() {};
if (process.env.NODE_ENV !== 'production') {
debug = __webpack_require__(7)('sockjs-client:main');
}
類似的訊息,就是利用 web socket 讓瀏覽器收到更新資訊來刷新畫面!
在 webpack-dev-server 的 output 要設定成相對路徑,那一般打包實體檔案的模式呢?可以寫在一起嗎?
當然可以!webpack.config.js 是一個 JavaScript 檔案,表示你可以在裡面寫判斷式,當然如果你不想這麼做,或是你打包實體檔案的時候需要產生多組檔案,你也可以分開檔案寫,例如:
.
└── webpack
├── webpack.config.build.js
└── webpack.config.dev.js
那麼指令又要怎麼設定呢?只要指定 config 就好囉!
$ webpack --config ./webpack/webpack.config.build.js
$ webpack-dev-server --config ./webpack/webpack.config.dev.js --inline
以上
記錄一下,希望也有解決你的問題!