使用 Vagrant 在虚拟机运行开发环境
如果正在开发一个更加高级的项目，并且需要使用 Vagrant 在虚拟机上运行开发环境，那可能会需要在虚拟机中运行 webpack。
配置项目
首先，确保 Vagrantfile 拥有一个静态 IP。
Vagrant.configure("2") do |config|
config.vm.network :private_network, ip: "10.10.10.61"
end然后，在项目中安装 webpack、webpack-cli、@webpack-cli/serve 和 webpack-dev-server：
npm install --save-dev webpack webpack-cli @webpack-cli/serve 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>Hey!</h2>
</body>
</html>注意，还需要创建一个 app.js 文件。
启动服务器
现在启动服务器：
webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll由于默认只允许从 localhost 访问服务器，所以需要修改 --host 参数，以允许在我们的宿主 PC 上访问。
webpack-dev-server 会在包中引入一个脚本，此脚本连接到 WebSocket，这样可以在任何文件修改时，触发重新加载应用程序。
--client-web-socket-url 标志可以确保脚本知道从哪里查找 WebSocket。默认情况下，服务器会使用 8080 端口，因此也需要在这里指定。
--watch-options-poll 可以确保 webpack 能够检测到文件更改。webpack 默认会监听文件系统触发的相关事件，但是 VirtualBox 使用默认配置会有许多问题。
现在服务器应该能够通过 http://10.10.10.61:8080 访问了。修改 app.js，应用程序就会实时重新加载。
配合 nginx 的高级用法
为了更好的模拟类生产环境，可以使用 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 serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll现在只能通过 127.0.0.1 访问服务，不过这并不影响，因为 ngnix 已经能够支持 PC 电脑访问到服务器。
总结
我们能够从静态 IP 访问 VagrantBox，然后使 webpack-dev-server 可以公开访问，以便浏览器可以访问到它。最后解决了 VirtualBox 不发送到文件系统事件的常见问题，此问题会导致服务器无法重新加载文件更改。
4 位贡献者
