Question

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

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

Answer 1

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

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

运行命令 firebase deploy ，应用程序应该在 firebase init 命令的上一个选定的firebase应用程序中正常运行。

Answer 2

@ sergiomeza88提到的内容也很适合交叉比赛，但这里有一些额外的细节可以解决我的问题，也会对其他人有所帮助。

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

can not find module "run" in bundle.js

正如答案中提到的那样，必须在此之后 - 你必须执行命令：

npm start

此命令将重新生成 bundle.js ，并且不会包含/要求我们在开发时使用的＆＃34;运行＆＃34; 模块。在此之后 - 您可以将最新的bundle.js部署到服务器。

提示2：在 output:{...} 部分的 webpack.config 中，您应该设置 path < / em>和 publicPath 到新目录，即 / public / 。否则，在 Firebase 主机上提及“公共”主机时目录作为要部署的默认目录 - 然后它将产生问题，应用程序将无法在Firebase服务器上运行。

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

好的，最后将 webpack.config 输出值更新为：

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

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

npm start
。最后，您可以使用以下方式进行部署：
firebase deploy
我相信您可能已经按照初始步骤启动firebase login和其他init命令，然后再运行上一个部署命令。

注意："firebase serve"命令也有助于调试和测试应用程序是否在本地计算机上运行良好，然后它也可以在实时Firebase服务器上运行良好。

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

2 个答案: