使用react.js和后端，您的工作流程看起来如何

Question

我正在使用Laravel 5.2和ReactJS开发一个简单的CRM应用程序。以前我是独立使用它们的，但现在我想尝试将它们组合在一起，这样Laravel将成为我的API，前端将全部在ReactJS中。

据我所知，当我的应用程序准备上线时，我将提供我的主视图，其中包括rootdiv、bundle.js等。

当谈到开发部分时，我有点困惑。我真的很喜欢反应热重新加载，但现在我不得不四处走走才能让它发挥作用。

我同时运行两台服务器。Webpack-dev-server和home，所以我可以调用我的API。但我还必须为webpack-dev服务器提供额外的index.html。当我在index.blade.php视图中更改某些内容时，我还需要在这个index.html中更改它，这有点痛苦。

有什么很酷的技巧可以用来改进我的工作流程吗？如果有任何例子，请给我一个链接，因为我找不到。有很多小的todo应用程序并不能真正解决我的问题。

PS。目前我正在使用这种方法https://github.com/sexyoung/laravel-react-webpack

@UPDATE

我想我找到了一个可以接受的解决方案。我会坚持我在问题中提供的webpack服务器配置（这真的很好，因为你可以使用热重载+你的api调用被重定向到后端端口，所以不是localhost:8080/api/user…你调用/api/user/1），但我也开发了一个简单的elixir扩展，它将php编译为简单的静态HTML页面，解决了编辑两个索引文件的问题（我们都知道程序员很懒）。

var php2html = require("gulp-php2html");
var gulp = require("gulp");
var rename = require("gulp-rename");
var Task = elixir.Task;
elixir.extend("php2html", function (message) {
    new Task("php2html", function () {
        return gulp.src("./resources/views/index.blade.php")
            .pipe(php2html())
            .pipe(rename('index.html'))
            .pipe(gulp.dest("./"));
    })
    .watch("resources/views/index.blade.php");
});
elixir(function (mix) {
    mix.sass('app.scss');
    mix.php2html();
});

所以现在我有两个索引文件：

• 资源/视图中的index.blade.php，由生产上的路由器解析

• index.html在我的应用程序文件夹的根目录中，该文件夹由webpack开发服务器用于开发

当然，现在这些文件是同步的

如果有更好的方法，请告诉我。

Answer 1

我通常使用这个webpack插件解决了这个问题（重复的index.html/php文件）：https://github.com/ampedandwired/html-webpack-plugin

我想这个想法和你的正好相反。您可以使用HtmlWebpack插件使用filename配置选项输出index.tmpl.php文件（或您需要的任何扩展名），而不是将php文件编译为静态html。通常，我会将该路径设置为应用程序服务器的templates文件夹。

我相信这种方法通常比反过来做更容易。使用此插件还有其他好处，例如根据Webpack输出配置自动注入捆绑脚本标记，以及将自动缓存爆破文件哈希添加到脚本标记URL中。