Firebase托管+与webpack进行反应

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"
    }
  ]
}