如果你在开发一个更加高级的项目，并且使用 Vagrant 来实现在虚拟机(Virtual Machine)上运行你的开发环境，那你可能会需要在虚拟机中运行 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 的高级用法
为了更好的模拟类生产环境（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 serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll现在只能通过 127.0.0.1 访问服务，这点关系不大，因为 ngnix 能够使得你的 PC 电脑能访问到服务器。
结论
我们能够从静态 IP 访问 Vagrant box，然后使 webpack-dev-server 可以公开访问，以便浏览器可以访问到它。然后，我们解决了 VirtualBox 不发送到文件系统事件的常见问题，此问题会导致服务器无法重新加载文件更改。
作者：唐伯虎点蚊香，如若转载，请注明出处：https://www.web176.com/webpack/22693.html
支付宝 
微信 