环境：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 // 每秒轮询检查文件变动
  }
})

最后第三个方法解决了我的问题，个人理解是文件变动的通知失效了或者没正确处理。