Webpack以某種方式繞過完全路由

我從這個優秀的教程開始：https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/並試圖通過添加一個新頁面來擴展它，通過一條新路線提供服務。然而碴周圍小時後，我意識到，在某種程度上創造反應的應用程序內正在做一些奇怪的魔法（爲mentioned in their docs here）：Webpack以某種方式繞過完全路由

`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的啓動位置。

來源

2017-01-25 swyx

這裏是github上的文件，如果你需要更多的信息：https://github.com/sw-yx/fcc-nightlife – swyx

所有Babel做的是transpile。我不明白你爲什麼認爲觸及根端點並不符合要求 - 這就是我們所談論的index.html，不是嗎？ –

是的。我可以向自己證明，擊中根端點並不會擊中路徑，因爲我故意編輯sendFile以發送不存在的文件 - 上面屏幕截圖中的「indextest.html」，並且當我在瀏覽器中打開它時，仍然服務於INDEX.HTML 。所以它顯然被webpack dev服務器攔截了。什麼是黑魔法，我甚至都沒有看到任何webpack dev服務器配置（我發佈了github），所以我不知道它是如何做這個攔截的。 – swyx

我還沒有玩過周圍與創造 - 反應 - 應用程序，但它似乎像，而不是使用默認的NPM開始，你可以創建自己的服務器上的文件並運行。

這看起來就是一個很好的例子。

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

或者，如果你正在尋找具有作爲API的路線，你可以將它們代理到不同的端口像你鏈接的教程中所示。

來源

2017-01-25 18:57:22 Jon

是的API工作正常。本教程將向您介紹如何雙重啓動API服務器和客戶端服務器。所以它的客戶端服務器我遇到了問題：html服務基本上是黑魔法的，因爲它不知道怎麼尊重routes/index.js，我不知道爲什麼！ – swyx

當您運行npm時，啓動默認的create-react-app運行腳本將啓動攔截所有請求的webpack dev服務器。您可以通過不運行默認運行腳本來解決此問題，而是編寫自己的server.js來處理啓動非api服務器。不知道是否有一個更清潔的解決方案內置到create-react-app – Jon

感謝您迄今爲止的答案@Jon。我想我可能需要編寫自己的運行腳本。我不明白的是我的node_modules文件夾中似乎沒有任何webpack模塊。我也無法找到攔截這些請求所需的'webpack.config.js'文件。在我的package.json中（https://github.com/sw-yx/fcc-nightlife/blob/master/package.json）本教程使用'babel-node'來啓動服務器和客戶端，並且我沒有'babel-node'甚至來自哪裏。如此多的奧祕。 – swyx

Webpack以某種方式繞過完全路由

回答

相關問題