WebPack 开发 Vagrant

如果你在开发更高级的项目，并且使用来实现在虚拟机(Virtual Machine)上运行你的开发环境(development environment)，那么你或许需要在虚拟机上运行 webpack。

项目配置

首先，确保 Vagrantfile 拥有固定 IP。

Vagrant.conure("2") do |con|
  con.vm.network :private_network, ip: "10.10.10.61"
end

接下来便是在项目中安装 webpack 和 webpack-dev-server。

npm install --save-dev webpack webpack-dev-server

确保已经设好 webpack.con.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>Heey!</h2>
  </body>
</html>

注意，你也需要创建 app.js 。

启动服务器

现在我们可以启动服务器了：

webpack-dev-server --host 0.0.0.0 --public 10.10.10.61:8080 --watch-poll

认配置下，服务器只允许在它的本地访问。通过更改 --host 参数，便能够在我们的 PC 上访问它。

webpack-dev-server 会在 bundle 中一段连接 WebSocket 的脚本，一旦你的被更改，服务器便会重新加载应用。--public 参数便是为了告诉脚本从哪里去找 WebSocket。服务器认使用 8080 端口，我们也需要标明。

--watch-poll 确保 webpack 能够检测到的更改。认配置下，webpack 会监听系统触发的相关事件，但是 Virtual@R_35_2@ 总会有这样或那样的问题。

现在服务器应该能够通过 http://10.10.10.61:8080 访问了。如果你改动了 app.js，应用便会重新加载。

配合的高级

为了更好的模拟类生产环境(production-like environment)，还可以用来代理 webpack-dev-server。

在你的中，加入下面：

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  @start-webpack-dev-server;
  }

  location @start-webpack-dev-server {
    default_type text/plain;
    return  "Please start the webpack-dev-server first.";
  }
}

proxy_set_header 这几行配置很重要，因为它们关系到 WebSocket 的正确运行。

上一节中启动 webpack-dev-server 的命令可改为：

webpack-dev-server --public 10.10.10.61 --watch-poll

现在服务器只能通过 127.0.0.1 访问，这点关系不大，因为 ngnix 能够使得你的 PC 能访问到服务器。

小结

我们能够从固定 IP 访问 Vagrant @R_35_2@，然后由于公开了 webpack-dev-server，使浏览器可以直接访问到它。最后了 Virtual@R_35_2@ 不派发系统事件的常见问题，此问题会导致服务器不重新加载更改。

←WebPack 管理依赖

WebPack 内容安全策略→

WebPack 开发 Vagrant