将Webpack dev服务器与PHP应用程序一起使用

Question

有没有人在Laravel 5+上安装webpack dev服务器(在我的情况下为5.1)？

我将使用我的laravel PHP后端和ReactJS前端,我想在我的dev env上安装webpack dev服务器.

但是我对NodeJS中的很多配置感到困惑(我专注于PHP后端).

通常可以将webpack dev服务器与PHP应用程序结合起来吗？

我希望我的env能够双向工作:在我的apache服务器上(用于后端调试/开发)和在NodeJS服务器上(用于前端调试/开发).

我是否需要一些中间件,解决webpack的特定端口？一般来说NodeJS服务器如何加载我的PHP脚本？...或者apache web服务器加载页面比NodeJS将通知推送到前端？

Answer 1

- 新答案 -

自从我第一次回答这个问题以来,我开始使用不同的解决方案.

使用新解决方案,您可以直接向nginx/apache Web服务器发出请求.Web服务器作为代理工作,并将请求重定向到webpack-dev-server或php应用程序.php应用程序公开了它的所有端点/api/<actual/endpoint>(参见下面未经测试的示例配置,其中localhost:8080指的是webpack-dev-server).

Apache配置(http:// php-application是指单独的VirtualHost,此处未显示)

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

    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/

    ProxyPassMatch ^\/api\/.+$ http://php-application/
    ProxyPassReverse / http://php-application/
</VirtualHost>

Nginx配置(PHP7.1)

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

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

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://localhost:8080;
    }

    location ~ ^/api/.+$ {
        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;
    }
}

- 老答案 -

我知道你让它成功了,但是当我自己遇到这个问题时,我遇到了这个帖子,在解决之后,我想分享我的解决方案.

我没有使用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属性是匹配所有内容的正则表达式.这将导致所有请求被转发到php后端.如果您希望前端处理某些请求,则可能必须更改正则表达式.

webpack dev服务器文档还说你必须将你的脚本标签src属性更改为http://localhost:8080/<path_to_bundle>/<bundleFilename.js>,但是如果我想从旧的(apache)url而不是localhost:8080访问应用程序时,这对我来说是必要的 - 当使用 - 时 - 标志.

使用反应进行热模块更换工作:

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

• 将加载器与您的其他加载器一起添加到webpack.config.js中 react-hot

现在你所要做的就是跑步webpack-dev-server --inline --hot,希望你是金色的.