Question

有没有办法将Firebase托管添加到使用webpack的React项目？具体来说，我正在尝试将其添加到https://github.com/mxstbr/react-boilerplate

这是我的firebase.json文件

{
  "hosting": {
    "firebase": "name",
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

当我致电firebase serve时，该页面为空。但是，如果我npm start该应用正常运行。因此，JS / React代码没有被注入index.html，即

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome to Firebase Hosting</title>
  </head>
  <head>
    <!-- The first thing in any HTML file should be the charset -->
    <meta charset="utf-8">
    <!-- Make the page mobile compatible -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Allow installing the app to the homescreen -->
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <title>React.js Boilerplate</title>
  </head>
  <!-- The app hooks into this div -->
  <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
  <body>
  <div id="app"></div>
  <div id="message">
      <h1>Welcome to Firebase Hosting</h1>
    </div>
  </body>
</html>

Answer 1

我正在使用create-react-app包创建我的反应应用。调用命令“npm run build”。这将生成一个包含webpack输出的“build”目录。在firebase.json文件中，指向“build”目录。然后运行“firebase serve”或“firebase deploy”命令。

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

Answer 2

在您的特殊情况下，当您有一个演示/原始/样板文件索引文件，我认为该文件将在＆＃39; / app /＆＃39;目录。您可以将其替换为您的应用程序原始 index.html ，并且您已完成。

其他帮助提示（您可以保留 app 目录，并在阅读时将其公之于众地使用）：

提示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服务器上运行良好。

Answer 3

我遇到了同样的问题。 @Caritos说得对。但是，我发现了其他问题。

1）我需要在HTML文件中添加代码：

<script type="text/javascript" src="/bundle.js"></script>

2）在npm构建目录中，此链接标记未正确构建，因为它不是自动关闭的：

不正确的：

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet">

正确的：

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet" />

关闭链接标记后，我的React App已部署。

Firebase托管+与webpack进行反应

3 个答案:

其他帮助提示（您可以保留 app 目录，并在阅读时将其公之于众地使用）：