node.js - Webpack 以某种方式完全绕过 Express 路由

Question

我从这个优秀的教程开始:https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/并尝试通过添加新页面以通过新路线提供服务来扩展它。然而，经过几个小时的研究，我意识到 create-react-app 正在做一些奇怪的魔法(如 mentioned in their docs here ):

`create-react-app` configures a Webpack development server to run on `localhost:3000`. 

This development server will bundle all static assets located under `client/src/`. 

All requests to `localhost:3000` will serve `client/index.html` which will include Webpack's `bundle.js`.

关键的引用是“所有对localhost:3000的请求都将服务于client/index.html”。我不知道这是怎么发生的。所以即使我搞乱了 routes/index.js:

   app.route('/')
        .get(function (req, res) {
            res.sendFile(bipath.join(__dirname, '../public', 'THISCANBEANYRANDOMFILENAME.html'))
        });

这并不重要，因为 webpack 无论如何都会将 localhost:3000 定向到 index.html。它在哪里以及如何做到这一点？底线我试图修改我的路由以提供新的 html 文件，但遇到了各种文件路径问题(是的，即使我使用 require('path') 或 sendFile( ...,{root: __dirname}).)

那么这里到底发生了什么，你能给我任何提示来帮助我吗？

编辑:这可能来自 babel 和 webpack - 我不太清楚 babel 的交接位置以及 webpack 的起始位置。

Answer 1

我还没有使用过 create-react-app，但似乎您可以创建自己的服务器文件并运行它，而不是使用默认的 npm start。

这看起来是一个很好的例子。

https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.6y4rrl61q

或者，如果您希望将路由用作 api，您可以将它们代理到不同的端口，如您链接的教程中所示。