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

weer0026發表於2017-10-25
Web

環境：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 // 每秒輪詢檢查檔案變動
  }
})

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

相關文章