2017-04-28

webpack + vagrant一些坑

webpack-dev-server 不能自动刷新

webpack-dev-server非常方便的一个功能就是检测文件变化，然后刷新项目，这样我们可以即时看见文件变化

然而使用vagrant，无论如何配置webpack，都无法检测文件变化，更别说刷新项目了。

wiki 里面的一段话:

Notification via inotify requires the kernel to be aware of all relevant filesystem events, which is not always possible for networked filesystems such as NFS …

大致意思就是对于类似NFS这样的网络系统文件，文件的变化并不总是能够成功的通知到变化。

通过在dev-server里面添加下面配置，Webpack会在100毫秒左右内检测文件更新，随时build。

1
2
3

watchOptions: {  
  poll: true
}

我们也可以使用webpack --watch --color,设置poll属性。

webpack热更新报错

The following modules couldn’t be hot updated: (They would need a full reload!)

需要对entry文件加上

1
2
3

if (module.hot) {
  module.hot.accept();
}

1.其实webpack-dev-server和Hot Module Replacement(HMR)是两个分开的功能，并不是加上--hot就能热替换。

2.启动服务时加上--hot或者配置hot:true的结果都是往plugin里添加new webpack.HotModuleReplacementPlugin(), 即：

1
2
3

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

3.官方文档
里说了HMR is “opt-in”，说白了就是它只是提供了一些接口给你，至于怎么个替换要你自己来写代码咯，但只有被accept的代码才能进行热替换，所以react有react-hot-loader, vue有vue-loader，这些插件已经包含了热替换的相关代码。

4.所以解决方法就是accept你的模块，让它能够进行热替换，也就是上面的代码。如果你不想手动去做，这里有个小插件

参考:
使用Vagrant + webpack开发踩过的坑
 webpack/hot/only-dev-server 报错

如果是使用vue-cli，则在dev-server.js中：

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true,
  // Reportedly, this avoids CPU overload on some systems.
  // https://github.com/facebookincubator/create-react-app/issues/293
  watchOptions: {
    poll: true
  }
})