托管与 webpack 捆绑在一起的 React Web App

Question

我正在尝试部署并遵循您添加 webpack 依赖项的方式，但它在浏览器中仍然显示空白。我正在上传 BUNDLE.JS、INDEX.HTML、PACKAGE.JSON、.BABELRC。（所有文件名均为小写）。

想知道我错过了什么。我的 webpack 在根目录上生成 bundle.js，现在，当 Firebase 创建 public 目录时，我将上述所有文件手动放入该 public 文件夹中，以便我可以部署。有人可以告诉我需要进行哪些更改以及上传到 Firebase 的实际需要的文件是什么。

Answer 1

你应该先运行命令webpack，然后你需要指出webpack文件夹bundle的结果在我的例子中是firebase.json

中的dist文件夹

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

运行命令 firebase deploy 并且该应用程序应该在 firebase init[=17 上之前选择的 firebase 应用程序中正常运行=]命令。

Answer 2

@sergiomeza88 提到的内容也适用于交叉匹配，但这里有一些额外的细节解决了我的问题，对其他人也有很大帮助。

提示1： 当您在 Firebase 上部署应用程序并尝试访问浏览器（尤其是 React、Redux）应用程序时，您可能会收到一条错误消息：

can not find module "run" in bundle.js

因此，如答案中所述，这是必须的，在此之后-您必须执行命令：

npm start

此命令将重新生成 bundle.js 而不会 include/require 我们正在使用的 "run" 模块发展。在此之后 - 您可以将最新的 bundle.js 部署到服务器。

技巧2：在webpack.config里面output:{...}您应该将 path 和 publicPath 设置到新目录的部分，即 /public/。否则在 Firebase 主机上，当您提到 'public' 目录作为默认部署目录时 - 那么它会产生问题并且应用程序不会运行在 Firebase 服务器上。

注意：实际上我不确定也不知道如何告诉 firebase 使用我的根目录而不是我的 'public' 文件夹 中的文件但我认为输出 webpack 生成的文件并将其他 public 文件（css,html）保存在 public 文件夹中是好的，否则 firebase deploy 可能会上传其他文件也位于根目录中。（如果我错了请纠正我）。

好的，最后当您更新 webpack.config 输出值时：

output: { path: __dirname+ '/public', publicPath: '/public/', filename: 'bundle.js' }

然后（最后确保您也完成了 Tip.1）和运行获取最新的命令 bundle.js

npm start

。最后，您可以使用以下方法进行部署：

firebase deploy

我相信您可能在运行上次部署命令之前遵循了启动 firebase login 和其他初始化命令的初始步骤。

注意："firebase serve" 命令也有助于调试和测试应用程序是否在本地机器上运行正常，那么它在实时 Firebase 服务器上也会运行正常。

托管与 webpack 捆绑在一起的 React Web App

Hosting React Web App bundled with webpack

deployment

firebase

reactjs

webpack

firebase-hosting