如何为 webpack 构建的生产 react bundle.js 提供服务?

Posted

技术标签:

【中文标题】如何为 webpack 构建的生产 react bundle.js 提供服务?【英文标题】:How to serve production react bundle.js built by webpack? 【发布时间】:2016-06-26 00:31:54 【问题描述】:

我的应用在 webpack 开发服务器上运行良好。现在,我想将它部署到我的生产服务器。所以我构建了 bundle.js。我尝试在快速服务器上提供文件,但我无法访问除根 / 以外的 URL。

例如,这是我的反应路线:

var Routes = () => (
    <Router history=browserHistory>
        <Route path="/" component=Landing>
        </Route>
        <Route path="/app" component=App>
        </Route>
    </Router>
)

和快递应用(我把bundle.jsindex.html放在./public中):

app.use(express.static('./public'));
app.listen(port, function () 
    console.log('Server running on port ' + port);
);

登陆页面 http://localhost:3000/ 有效。但是应用程序 http://localhost:3000/app 没有。相反,我收到了一个错误Cannot GET /app

【问题讨论】:

【参考方案1】:

您需要在快速服务器上声明一个“catch all”路由,该路由捕获所有页面请求并将它们定向到客户端。首先,确保您的服务器上包含 path 模块:

var path = require('path');

然后,把这个放在app.listen之前:

app.get('*', function(req, res) 
  res.sendFile(path.resolve(__dirname, 'public/index.html'));
);

这假设您通过脚本标签将bundle.js 插入index.html

【讨论】:

谢谢,完美运行!在您的解决方案中发现一个小错字:应该是 res.sendFile(path.resolve(__dirname,'public/index.html')); 太棒了!也感谢您注意到这一点,我已经编辑了答案。 这与我的设置相同。您只需将 ./dist/bundle.js 复制到 ./public (确保 bundle.js 的路径与 index.html 中定义的相对路径匹配 - 在您的情况下应该是 ./public/dist/bundle.js )。您需要记住在每个版本中都这样做。我认为您可以使用脚本、webpack 插件或 gulp 任务自动执行此操作 遵循此方法,每当完成 Get 请求时,它都会返回 html 文件作为响应 @tscizzle 是的,我通过更改某些行的顺序来解决它只是 app.get('*', function(req, res) res.sendFile(path.resolve(__dirname, 'public /index.html')); );最后,在其他路由和 server.listen(port); 之前

以上是关于如何为 webpack 构建的生产 react bundle.js 提供服务?的主要内容,如果未能解决你的问题,请参考以下文章

NextJS:如何为生产构建添加屏幕加载?

小白学react之由FOUC引发的一次webpack变革

Electron builder - 如何为生产 Windows 可执行文件构建 loadURL

如何为 React Native 构建 .ipa?

为啥 React Webpack 生产版本显示空白页面?

你如何配置 Webpack 以清除生产缩小的 React 警告?