node.js - 将 Webpack 开发服务器与 PHP 应用程序一起使用

Question

有人有安装经验吗webpack dev server在 Laravel 5+(在我的情况下为 5.1)？

我将使用我的 laravel PHP 后端和 ReactJS 前端，我想在我的开发环境中安装 webpack 开发服务器。

但我对 NodeJS 中的很多配置感到困惑(我专攻 PHP 后端)。

webpack 开发服务器与 PHP 应用程序通常可以结合使用吗？

我希望我的环境可以双向工作:在我的 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 开发服务器正常工作:

改变这个

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>"
        }
    ]
}

请注意，路径属性是一个匹配所有内容的正则表达式。这将导致所有请求都被转发到 php 后端。 如果您希望前端处理某些请求，您可能需要更改正则表达式。

webpack 开发服务器文档还说您必须将脚本标签的 src 属性更改为 http://localhost:8080/<path_to_bundle>/<bundleFilename.js> ，但仅当我想在使用 --inline 标志时从其旧 (apache) url 而不是 localhost:8080 访问应用程序时，这对我来说是必需的。

要使用 react 进行热模块替换:

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

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

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