解決 webpack-dev-server 無法自動刷新畫面問題

需求

1. 自動監控 JavaScript 檔案
2. 一但有更新，觸發重新打包
3. 自動刷新畫面

問題

用 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

以上

記錄一下，希望也有解決你的問題！