开发 - 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 文件。脚本标签应指向您的 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 访问。我们将从主机 PC 访问它，因此需要更改 --host 以允许此操作。
webpack-dev-server 会在您的 bundle 中包含一个脚本，该脚本连接到 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 会负责使其在您的主机 PC 上可用。
总结
我们将 Vagrant box 设置为可通过静态 IP 访问，然后将 webpack-dev-server 设置为可公开访问，以便浏览器可以连接。接着，我们解决了 VirtualBox 不发送文件系统事件的常见问题，该问题会导致服务器在文件更改时无法重新加载。
4 贡献者
