开发 - Vagrant
如果你在开发一个更加高级的项目，并且使用 Vagrant 来实现在虚拟机(Virtual Machine)上运行你的开发环境，那你可能会需要在虚拟机中运行 webpack。
配置项目
首先，确保 Vagrantfile 拥有一个静态 IP。
Vagrant.configure("2") do |config|
config.vm.network :private_network, ip: "10.10.10.61"
end
然后，在项目中安装 webpack 和 webpack-dev-server。
npm install --save-dev webpack webpack-dev-server
确保提供一个 webpack.config.js 配置文件。如果还没有准备，下面的示例代码可以作为起步的最简配置：
module.exports = {
context: __dirname,
entry: './app.js'
};
然后，创建一个 index.html 文件。其中的 script 标签应当指向你的 bundle。如果没有在配置中指定 output.filename，其默认值是 bundle.js。
<!doctype html>
<html>
<head>
<script src="/bundle.js" charset="utf-8"></script>
</head>
<body>
<h2>Heey!</h2>
</body>
</html>
注意，你还需要创建一个 app.js 文件。
启动 server
现在，我们启动 server：
webpack-dev-server --host 0.0.0.0 --public 10.10.10.61:8080 --watch-poll
默认只允许从 localhost 访问 server。所以我们需要修改 --host 参数，以允许在我们的宿主 PC 上访问。
webpack-dev-server 会在 bundle 中引入一个脚本，此脚本连接到 WebSocket，这样可以在任何文件修改时，触发重新加载应用程序。
--public 标记可以确保脚本知道从哪里查找 WebSocket。默认情况下，server 会使用 8080 端口，因此也需要在这里指定。
--watch-poll 可以确保 webpack 能够检测到文件更改。webpack 默认会监听文件系统触发的相关事件，但是 VirtualBox 使用默认配置会有许多问题。
现在 server 应该能够通过 http://10.10.10.61:8080 访问了。修改 app.js，应用程序就会实时重新加载。
配合 nginx 的高级用法
为了更好的模拟类生产环境(production-like environment)，还可以用 nginx 来代理 webpack-dev-server。
在你的 nginx 配置文件中，加入下面代码：
server {
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
error_page 502 @start-webpack-dev-server;
}
location @start-webpack-dev-server {
default_type text/plain;
return 502 "Please start the webpack-dev-server first.";
}
}
proxy_set_header 这几行配置很重要，因为它们能够使 WebSocket 正常运行。
然后 webpack-dev-server 启动命令可以修改为：
webpack-dev-server --public 10.10.10.61 --watch-poll
现在只能通过 127.0.0.1 访问 server，这点关系不大，因为 ngnix 能够使得你的 PC 能访问到 server。
结论
我们能够从静态 IP 访问 Vagrant box，然后使 webpack-dev-server 可以公开访问，以便浏览器可以访问到它。然后，我们解决了 VirtualBox 不发送到文件系统事件的常见问题，此问题会导致 server 无法重新加载文件更改。
