Question

我在Stephen Grider的ReduxSimpleStarter之上构建了一个Web应用程序，这是一个react-redux样板。它使用Webpack进行捆绑。现在我想在firebase上托管我的应用。当我这样做时，捆绑不起作用，我只剩下一个简单的index.html。

有人可以解释一下如何触发非本地托管的应用程序的Webpack捆绑吗？

这些文件可能有用，但我不确定。

    //package.json
{
      "name": "testapp",
      "version": "0.0.0",
      "description": "testapp",
      "main": "index.js",
      "scripts": {
        "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.2.1",
        "babel-loader": "^6.2.0",
        "babel-preset-es2015": "^6.1.18",
        "babel-preset-react": "^6.1.18",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.0"
      },
      "dependencies": {
        "axios": "^0.9.1",
        "babel-preset-stage-1": "^6.1.18",
        "jquery": "^2.2.0",
        "lodash": "^3.10.1",
        "material-ui": "^0.14.4",
        "react": "^0.14.3",
        "react-dom": "^0.14.3",
        "react-redux": "^4.0.0",
        "react-tap-event-plugin": "^0.2.2",
        "redux": "^3.0.4",
        "redux-promise": "^0.5.1"
      }
    }

//webpack.config

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Answer 1

我找到了解决方案。在"webpack": "^1.12.9"对象中加入dependencies。然后，改变

"scripts": {
        "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
      },

到

"scripts": {
        "start": "node ./node_modules/webpack/bin/webpack.js"
      },

Answer 2

我知道答案已经回答，但这是对答案的补充说明，这将有很大帮助。

提示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捆绑在一起的Web应用程序

2 个答案: