Webpack 開發(fā) - Vagrant

2023-05-17 17:56 更新

如果你在開發(fā)一個(gè)更加高級(jí)的項(xiàng)目，并且使用 Vagrant 來實(shí)現(xiàn)在虛擬機(jī)(Virtual Machine)上運(yùn)行你的開發(fā)環(huán)境，那你可能會(huì)需要在虛擬機(jī)中運(yùn)行 webpack。

配置項(xiàng)目

首先，確保 ?Vagrantfile? 擁有一個(gè)靜態(tài) IP。

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

然后，在項(xiàng)目中安裝 ?webpack?、?webpack-cli?、?@webpack-cli/serve? 和 ?webpack-dev-server?；

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

確保提供一個(gè) ?webpack.config.js? 配置文件。如果還沒有準(zhǔn)備，下面的示例代碼可以作為起步的最簡(jiǎn)配置：

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

然后，創(chuàng)建一個(gè) ?index.html? 文件。其中的 script 標(biāo)簽應(yīng)當(dāng)指向你的 bundle。如果沒有在配置中指定 ?output.filename?，其默認(rèn)值是 ?bundle.js?。

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

注意，你還需要?jiǎng)?chuàng)建一個(gè) ?app.js? 文件。

啟動(dòng)服務(wù)器

現(xiàn)在，我們啟動(dòng)服務(wù)器：

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

默認(rèn)只允許從 localhost 訪問服務(wù)器。所以我們需要修改 ?--host? 參數(shù)， 以允許在我們的宿主 PC 上訪問。

?webpack-dev-server? 會(huì)在包中引入一個(gè)腳本，此腳本連接到 WebSocket，這樣可以在任何文件修改時(shí)，觸發(fā)重新加載應(yīng)用程序。 ?--client-web-socket-url? 標(biāo)志可以確保腳本知道從哪里查找 WebSocket。默認(rèn)情況下，服務(wù)器會(huì)使用 ?8080? 端口，因此也需要在這里指定。

?--watch-options-poll? 可以確保 webpack 能夠檢測(cè)到文件更改。webpack 默認(rèn)會(huì)監(jiān)聽文件系統(tǒng)觸發(fā)的相關(guān)事件，但是 VirtualBox 使用默認(rèn)配置會(huì)有許多問題。

現(xiàn)在服務(wù)器應(yīng)該能夠通過 ?http://10.10.10.61:8080? 訪問了。修改 ?app.js?，應(yīng)用程序就會(huì)實(shí)時(shí)重新加載。

配合 nginx 的高級(jí)用法

為了更好的模擬類生產(chǎn)環(huán)境（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? 這幾行配置很重要，因?yàn)樗鼈兡軌蚴?WebSocket 正常運(yùn)行。

然后 ?webpack-dev-server? 啟動(dòng)命令可以修改為：

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

現(xiàn)在只能通過 ?127.0.0.1? 訪問服務(wù)，這點(diǎn)關(guān)系不大，因?yàn)?ngnix 能夠使得你的 PC 電腦能訪問到服務(wù)器。

結(jié)論

我們能夠從靜態(tài) IP 訪問 Vagrant box，然后使 ?webpack-dev-server? 可以公開訪問，以便瀏覽器可以訪問到它。然后，我們解決了 VirtualBox 不發(fā)送到文件系統(tǒng)事件的常見問題，此問題會(huì)導(dǎo)致服務(wù)器無法重新加載文件更改。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)