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

Question

有没有人有在 Laravel 5+（在我的情况下是 5.1）上安装 webpack dev server 的经验？

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

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

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

我希望我的环境可以双向工作：在我的 apache 服务器上（用于后端调试/开发）和在 NodeJS 服务器上（用于前端调试/开发）。

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

Answer 1

我遇到了类似的问题： 在我的桌面上，我有 PHP 服务器运行 Open Server 以及 Webpack Vue 应用程序。我想从我的 Vue 应用程序中使用 AJAX 访问 API。所以这是我的解决方案：

创建本地域（我不喜欢'localhost'，所以我创建了loc-team.test）与Open Server（你可以使用XAMPP，或者例如）。现在我可以从浏览器访问http://loc-team.test/ajax.php，但我没有从我的 Webpack 开发服务器 (http://loc-team.test:8081) 访问此 URL 的 AJAX 访问权限，因为 Access-Control-Allow-Origin / CORS.

将代理添加到您的 devServer 在 webpack dev 配置中包含以下道具：

devServer: {
  contentBase: 'dist_folder',
  host: 'loc-team.test',
  port: 8081,
  overlay:{
    warnings: true,
    errors: true,
  },
  proxy: {
    '/api': {
      target: 'http://loc-team.test',
      pathRewrite: {'^/api' : ''}
    }
  },
}

所以在我的 Vue 应用程序中，我可以向 loc-team.test/api/ajax.php 发出 AJAX 请求，因为pathRewrite 我会得到答案来自 loc-team.test/ajax.php。我也对会话没有问题。

在webpack.js.org了解更多关于代理的信息

Answer 2

- 新答案-

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

使用新解决方案，您可以直接向 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>，但这仅在我想从旧 (apache) url 而不是 localhost 访问应用程序时才需要:8080 使用 --inline 标志时。

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

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

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

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