使用Vagrant + webpack开发踩过的坑

by Jack Pu

团队的移动项目采用了webpack + vue作为前端架子，然而我们同时在Vagrant开发时却遇见了不少问题。

webpack-dev-server 8080端口

我们在linux 上一般默认启用了 127.0.0.1:8080作为我们的webpack dev server的服务，但是127.0.0.1对外并非可以访问的，这个时候我们需要更改两件事情，一件事情是增加vagrantfile里的端口，

config.vm.network "forwarded_port", guest: 8080, host: 8080

第二件事情是修改启动命令

webpack --host 0.0.0.0 --port 8080

webpack-dev-server 不能自刷新

webpack-dev-server非常方便的一个功能就是检测文件变化，然后刷新项目，这样我们可以即时看见文件变化，然而在vagrant什么都没有发生!!!!!!

于是搜索资料，参考 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这样的网络系统文件，文件的变化并不总是能够成功的通知到变化。好在这并没有宣布彻底放弃当前方案，后面有人给出了方案:

watchOptions: {
  poll: true
}

我们可以使用webpack --watch --color,设置poll属性，Webpack会在100毫秒左右内检测文件更新，随时build。

参考