記webpack的HRM失效的幾個解決方案

環境：macOS
配置：vue-cli自帶全家桶（webpack 2.7）

最近開了一個新項目，發現webpack的HRM失效了，折騰了半天搞定了，把過程作個記錄。

1.編輯器的鍋

使用自動編譯代碼時，可能會在保存文件時遇到一些問題。某些編輯器具備「安全寫入」功能，可能會影響從新編譯。
Sublime Text 3 - 在用戶首選項(user preferences)中添加 atomic_save: "false"。
IntelliJ - 在首選項(preferences)中使用搜索，查找到 "safe write" 而且禁用它。
Vim - 在設置(settings)中增長 :set backupcopy=yes。
WebStorm - 在 Preferences > Appearance & Behavior > System Settings 中取消選中 Use "safe write"。
節選自：webpack中文文檔

這部分問題就是有些IDE修改文件並不會直接生效，會先放到一個臨時文件中。

2. macOS的問題

檢測文件是否變更使用的是macOS的fsevents，經過建立fsevents的設備來實現，具體瞭解的很少，因此多是權限問題致使建立不了。

sudo npm run dev 用最高權限

具體能夠看Stackoverflow上的一個回答。

3. 主動檢查文件變更

修改web-dev-middle配置（在build/dev-server.js文件）

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true,
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000 // 每秒輪詢檢查文件變更
  }
})

最後第三個方法解決了個人問題，我的理解是文件變更的通知失效了或者沒正確處理。