在CakePHP项目中设置React

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

我有一个现有的项目（带有模型、视图和控制器）。我想在其webroot（

project/Miniproject/index.html

）中设置迷你项目

index.html

将对控制器中定义的api进行ajax调用

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

我试过安装。但它使用web开发服务器（并在localhost:3000上呈现文件）。但我希望从运行CakePHP项目的nginx服务器上呈现文件

当我访问url（

Project/Miniproject/index.html

）时，它找不到

dist/bundle.js

，因为它在内存中。那么，如何使用webpack在CakePHP webroot中设置React呢？

我建议查看

您仍然可以让Webpack通过BrowserSync运行开发服务器，并使用代理选项重新加载apache虚拟主机。（不必使用Web包开发服务器）

e、 g.在您的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是如何设置他的项目的。你应该能够tweek它或启动您的网页配置从头开始

请记住，没有一个正确的答案，你只需要尝试一些你能理解并适用于你的方法。一旦你到达一堵砖墙，你就出去探索。但我觉得你已经知道了：）

祝你好运

：）

---

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

npm运行build

@azium，但每次小改动后我都需要运行此命令。这会不会减慢我的开发速度？webpack有一个监视标志，但我不认为你可以同时混合使用开发服务器+热重新加载和nginx提供的服务。老实说，将react前端与cakephp后端完全分开可能更好。不确定按照您想要的方式设置它会带来什么好处。@azium我使用这种方法，因为我可以使用cake php会话