如何使用 webpack 在 CakePHP webroot 中设置 React？

我有一个现有的 CakePHP项目(带有模型、 View 、 Controller )。我要设置迷你React项目位于其 webroot (Project/Miniproject/index.html) 中。 index.html 将对 Controller 中定义的 api 进行 ajax 调用。

- Project 
| - app 
| | - Controller 
| | - View 
| | - Model 
| | - webroot 
| | | - Miniproject 
| | | | - index.html [Mini react project] 

我尝试安装React Transform Boilerplate 。但它使用 Web 开发服务器(并在 localhost:3000 上呈现文件)。但我想要从运行 CakePHP 项目的 nginx 服务器渲染文件。

当我访问 URL (Project/Miniproject/index.html) 时，它找不到 dist/bundle.js，因为它在内存中。那么如何使用 webpack 在 CakePHP webroot 中设置 React？

请您参考如下方法:

我建议查看https://github.com/brawlins/react-webpack-php-starter 。

您仍然可以通过 BrowserSync 让 Webpack 运行开发服务器，并且您将使用代理选项来重新加载您的 apache 虚拟主机。 (不必使用 webpack-dev-server )

例如在你的 webpack.config.js 中

plugins: [ 
 
        // reloads browser when the watched files change 
        new BrowserSyncPlugin({ 
            // use existing Apache virtual host 
            proxy: 'http://localhost:80/', 
            tunnel: false, 
            // watch the built files and the index file 
            files: ['public/assets/*', './index.php', './api/*.php'] 
        }), 

希望这是有道理的。挖掘我链接的存储库中的代码并稍微尝试一下。一旦您了解了@brawlins 如何设置他的项目。您应该能够调整它或从头开始您的 webpack 配置。

请记住，没有一个正确的答案，您只需尝试您可以理解且适合您的方法即可。一旦你到达砖墙，你就出去探索。但我觉得你已经知道了:)

祝你好运!

:)

附:我同意@azium，最好尽可能将前端和后端分开