使用Webpack dev服务器和PHP应用程序

有没有人在Laravel 5+上安装webpack开发服务器 （在我的情况下是5.1）？

我将使用我的laravel PHP后端与ReactJS前端，我想在我的开发环境有webpack开发服务器。

但我很困惑与NodeJS中的很多configuration（我专门在PHP后端）。

是否可以将webpack dev服务器与PHP应用程序结合起来？

我想我的env工作两种方式：在我的apache服务器（用于后端debugging/开发）和NodeJS服务器（用于前端debugging/开发）。

我需要有一些中间件，解决webpack的特定端口？ 一般NodeJS服务器如何加载我的PHP脚本？ …或Apache Web服务器将加载页面比NodeJS将推送通知到前端？

Answer 1

– 新的答案 –

自从我第一次回答这个问题以来，我开始使用我喜欢的另一种解决scheme。

在这个解决scheme中，你直接向一个nginx / apache服务器发送请求，这个服务器代理webpack-dev-server的请求（见下面的例子localhost:8080是指webpack-dev-server）。

Apacheconfiguration

 <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> 

Nginxconfiguration（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. 设置你的代理虚拟主机（见上面的configuration）

---

– 旧的答案 –

我知道你做到了，但是当我自己遇到这个问题时，我碰到了这个post，在解决之后，我想分享我的解决scheme。

我没有使用Laravel，但在apache服务器上有一个PHP后端。 我只需要在webpack.config.js中做两处更改就可以使webpack dev服务器工作：

改变这一点

 publicPath: __dirname + '<path_to_bundle>' 

为此（注意： http://localhost:8080是webpack-dev-server的url）

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

并添加一些代理设置转发请求到php后端

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

注意path属性是一个匹配所有东西的正则expression式。 这将导致所有请求被转发到php后端。 如果您希望前端处理某些请求，则可能必须更改正则expression式。

webpack dev服务器的文档也说，你必须改变你的脚本标签的src属性为http://localhost:8080/<path_to_bundle>/<bundleFilename.js> ，但这只是我必要的，如果我想访问应用程序从旧的（apache）url替代localhost：8080时使用–inline标志。

使热模块更换工作与反应：

• 安装react-hot-loader： npm install --save-dev react-hot-loader

• 将loader加载到你的webpack.config.js和其他加载器一样react-hot

现在你所要做的就是运行webpack-dev-server --inline --hot ，希望你是webpack-dev-server --inline --hot 。