React 应用程序在本地构建，而不是通过 Firebase

Question

我完成了一个 React 应用程序，并想将其部署到 Firebase 进行托管（也包括存储，但首先是第一件事）。它在我的 Webpack localhost 设置中构建良好，但是当我使用 Firebase 部署和加载时，出现白屏并且：

client.min.js:1 Uncaught SyntaxError: Unexpected token <

该行没有尖括号。我已经包含了我的错误消息，firebase HTML（[my-company] 在我的代码中是一个不同的字符串），以及 webpack.config.js:

<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-storage.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCFRYmS3bFScffCG8Ko7QRieDWExeaa_yE",
    authDomain: "[mycompany]-records.firebaseapp.com",
    databaseURL: "https://[mycompany]-records.firebaseio.com",
    storageBucket: "[mycompany]-records.appspot.com",
  };
  firebase.initializeApp(config);
</script>

webpack.config.js :

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: [
            'react-html-attrs', 
            'transform-class-properties', 
            'transform-decorators-legacy'
          ],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Answer 1

解决方案：

我在 Webpack 配置中的输出目录错误。

当 Firebase 去寻找缩小的 JS 源时，它没有找到它。

如果找不到 JS 文件，Firebase 会自动加载根 HTML 文件。这就是左尖括号的来源。

万岁！

React 应用程序在本地构建，而不是通过 Firebase

React app building locally, not via Firebase

javascript

facebook

firebase

reactjs

firebase-hosting