开发 - Vagrant

如果你在开发一个更加高级的项目，并且使用 Vagrant 来实现在虚拟机(Virtual Machine)上运行你的开发环境，那你可能会需要在虚拟机中运行 webpack。

配置项目

首先，确保 Vagrantfile 拥有一个静态 IP。

  1. Vagrant.configure("2") do |config|
  2.   config.vm.network :private_network, ip: "10.10.10.61"
  3. end

然后，在项目中安装 webpack 和 webpack-dev-server。

  1. npm install --save-dev webpack webpack-dev-server

确保提供一个 webpack.config.js 配置文件。如果还没有准备，下面的示例代码可以作为起步的最简配置：

  1. module.exports = {
  2.   context: __dirname,
  3.   entry: './app.js'
  4. };

然后，创建一个 index.html 文件。其中的 script 标签应当指向你的 bundle。如果没有在配置中指定 output.filename，其默认值是 bundle.js。

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <script src="/bundle.js" charset="utf-8"></script>
  5.   </head>
  6.   <body>
  7.     <h2>Heey!</h2>
  8.   </body>
  9. </html>

注意，你还需要创建一个 app.js 文件。

启动 server

现在，我们启动 server：

  1. 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 配置文件中，加入下面代码：

  1. server {
  2.   location / {
  3.     proxy_pass http://127.0.0.1:8080;
  4.     proxy_http_version 1.1;
  5.     proxy_set_header Upgrade $http_upgrade;
  6.     proxy_set_header Connection "upgrade";
  7.     error_page 502 @start-webpack-dev-server;
  8.   }
  10.   location @start-webpack-dev-server {
  11.     default_type text/plain;
  12.     return 502 "Please start the webpack-dev-server first.";
  13.   }
  14. }

proxy_set_header 这几行配置很重要，因为它们能够使 WebSocket 正常运行。

然后 webpack-dev-server 启动命令可以修改为：

  1. 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 无法重新加载文件更改。

贡献人员

SpaceK33z SpaceK33z byzyk byzyk chrisVillanueva chrisVillanueva