在PHP應用程序中使用Webpack dev服務器

Question

有沒有人在Laravel 5+（我的情況是5.1）上安裝webpack dev server？

我打算將我的laravel PHP後端與ReactJS前端一起使用，我希望在我的開發環境中使用webpack dev服務器。

但我很困惑與NodeJS中的很多配置（我專門研究PHP後端）。

通常可以將webpack dev服務器與PHP應用程序結合起來嗎？我想我的env工作在兩個方面：在我的apache服務器（用於後端調試/開發）和NodeJS服務器（用於前端調試/開發）。

我需要一些中間件，解決webpack的特定端口？一般情況下，NodeJS服務器如何加載我的PHP腳本？ ...或者apache web服務器會加載頁面比NodeJS會將通知推送到前端？

Answer 1

- 新的答案 -

因爲我第一次回答這個問題，我已經使用不同的解決方案，我更喜歡開始。

在此解決方案中，您直接向請求代理webpack-dev-server的nginx/apache服務器發送請求（請參閱下面的示例，localhost:8080涉及webpack-dev-server）。

Apache的配置

<VirtualHost *:80> 
    ServerName my-website.dev 

    ProxyPassMatch ^(\/$)|(\/.+\.(png|css|js|json)$)|(sockjs-node) http://localhost:8080/ 
    ProxyPassReverse/http://localhost:8080/ 

    ProxyPass/http://my-website-backend/ 
    ProxyPassReverse/http://my-website-backend/ 
</VirtualHost> 

Nginx的配置（PHP7.1）

server { 
    listen 80; 
    server_name my-website.dev; 

    root /path/to/backend/public; 
    index index.php index.html; 

    location ~ ^(.*\.(jpe?g|png|gif|svg|js|css|html|woff2?)|/sockjs-node/.*|/)$ { 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection "upgrade"; 
     proxy_pass http://localhost:8080; 
    } 

    location ~ ^/.+$ { 
     try_files /index.php =404; 
     fastcgi_split_path_info ^(.+\.php)(/.+)$; 
     fastcgi_pass unix:/run/php/php7.1-fpm.sock; 
     fastcgi_index index.php; 
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 
     include fastcgi_params; 
    } 
} 

如果你從頭設置此功能，基本上有你需要採取4個步驟：

1. （僅限apache）設置與生產捆綁包（而不是webpack-dev-server）配合使用的後端虛擬主機。
2. 安裝webpack-dev-server，這樣一切工作，除了從後端請求（老答案的底部可能有用的信息）。
3. 設置你的代理虛擬主機（見上面的配置）

---

- 舊的答案 -

我知道你做這工作，但我遇到了這個帖子的時候我有這個問題我自己，並解決它後，想分享我的解決方案。

我沒有使用Laravel，但在apache服務器上有一個PHP後端。我只需要在webpack.config中做兩處更改。JS做的WebPack開發服務器的工作：

更改此

publicPath: __dirname + '<path_to_bundle>' 

爲了這個（注：http://localhost:8080是的URL的WebPack-DEV-服務器）

publicPath: "http://localhost:8080/<path_to_bundle>/" 

，並添加一些代理服務器設置轉發請求到php後端

devServer: { 
    proxy: [ 
     { 
      path: /./, 
      target: "http://<php_backend_url>" 
     } 
    ] 
} 

請注意，路徑屬性是一個匹配的所有東西的正則表達式。這將導致所有請求被轉發到php後端。 如果您希望前端處理某些請求，則可能必須更改正則表達式。

webpack dev服務器文檔還說，您必須將腳本標記src屬性更改爲http://localhost:8080/<path_to_bundle>/<bundleFilename.js>，但這僅對我來說是必需的，如果我想從舊的（apache）url訪問應用程序而不是本地主機：使用--inline標誌時的8080。

爲了與熱模塊的更換工作作出反應：

• 安裝反應熱裝載機：npm install --save-dev react-hot-loader

• 裝載機添加到您的webpack.config.js與其他裝載機沿as react-hot

現在您只需運行webpack-dev-server --inline --hot，希望你是金。