22

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

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

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

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

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

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

4

2 回答 2

24

- 新答案 -

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

使用新解决方案，您可以直接向 nginx/apache Web 服务器发出请求。Web 服务器充当代理并将请求重定向到 webpack-dev-server 或 php 应用程序。php 应用程序暴露了它的所有端点/api/<actual/endpoint>（请参阅下面的未经测试的示例配置，其中localhost:8080指的是 webpack-dev-server）。

Apache config（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>"
        }
    ]
}

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

webpack 开发服务器文档还说你必须将你的脚本标签 src 属性更改http://localhost:8080/<path_to_bundle>/<bundleFilename.js>为-内联标志。

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

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

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

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

于 2016-04-29T08:09:15.327 回答
1

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

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

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

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上阅读有关代理的更多信息

于 2019-09-30T16:12:36.797 回答