Vagrant 开发环境

webpackjsorg-main指南-教程

Vagrant 开发环境

如果你有一个更复杂的项目，并使用 Vagrant 在虚拟机中运行开发环境，你通常也会希望在虚拟机中运行 webpack。

配置项目

首先，确保 Vagrantfile 具有一个静态 IP：

ruby 复制代码

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：

bash 复制代码

npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-server

确保有一个 webpack.config.js 文件。如果你还没有，可以使用以下最小示例来入门：

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  context: __dirname,
  entry: "./app.js",
};

并创建一个 index.html 文件。script 标签应指向你的 bundle。如果在配置中没有指定 output.filename，则它将是 bundle.js。

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <script src="/bundle.js" charset="utf-8"></script>
  </head>
  <body>
    <h2>Hey!</h2>
  </body>
</html>

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

运行服务器

现在，让我们运行服务器：

bash 复制代码

webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll

默认情况下，服务器只能从 localhost 访问。我们将从宿主机（host 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 配置文件中，添加以下内容：

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 的命令可以改为：

bash 复制代码

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 不会发送文件系统事件，导致服务器在文件变化时无法重新加载。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。