開發 - 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 檔案。指令碼標籤應指向您的套件。如果設定中未指定 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預設情況下，伺服器只能從本機端存取。我們將從主機電腦存取它，因此我們需要變更 --host 以允許此操作。
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 的進階用法
為了模擬更接近實際環境的環境，也可以使用 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 上存取，這沒關係，因為 nginx 會負責讓它在您的主機電腦上可用。
結論
我們讓 Vagrant 盒子可以從靜態 IP 存取，然後讓 webpack-dev-server 公開存取，以便瀏覽器可以連線到它。接著我們解決了 VirtualBox 沒有傳送檔案系統事件的常見問題，導致伺服器無法在檔案變更時重新載入。
4 貢獻者
