开发 - 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 文件。脚本标签应该指向您的捆绑包。如果配置文件中未指定 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默认情况下，服务器只能从本地主机访问。我们将从主机 PC 访问它，因此我们需要更改 --host 以允许这样做。
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 行非常重要，因为它们允许 WebSockets 正确工作。
然后，启动 webpack-dev-server 的命令可以更改为：
webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll这使得服务器只能在 127.0.0.1 上访问，这没关系，因为 nginx 会负责将其在你的主机上公开访问。
结论
我们让 Vagrant 虚拟机可以通过静态 IP 访问，然后将 webpack-dev-server 公开访问，以便可以通过浏览器访问。然后我们解决了 VirtualBox 不会发送文件系统事件的常见问题，导致服务器在文件更改时不会重新加载。
4 位贡献者
