ribbon image search rewind fast-forward speech-bubble pie-graph star

使用Vagrant + webpack开发踩过的坑

团队的移动项目采用了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。

参考

You Can Speak "Hi" to Me in Those Ways