托管与 webpack 捆绑的 web 应用程序答案

【问题标题】：Hosting web app bundled with webpack托管与 webpack 捆绑的 web 应用程序
【发布时间】：2016-02-23 17:11:17
【问题描述】：

我在 Stephen Grider 的 ReduxSimpleStarter（一个 react-redux 样板）之上构建了一个 Web 应用程序。它使用 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: './'
  }
};

【问题讨论】：

标签： javascript web-applications webpack webpack-dev-server

【解决方案1】：

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

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

到

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

【讨论】：

我也在尝试使用 webpack 捆绑我的应用程序，然后使用 firebase serve 运行它，有什么提示吗？

【解决方案2】：

我知道它已被回答，但这是对答案的附加说明，将有很大帮助。

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

在 bundle.js 中找不到模块“run”

所以正如答案中提到的，它是必须的，在此之后 - 你必须执行命令：

npm 开始

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

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

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

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

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

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

npm 开始

。最后，您可以使用以下命令进行部署：

firebase deploy

我相信您在运行最后一个部署命令之前可能已经遵循了启动 firebase login 和其他 init 命令的初始步骤。

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

【讨论】：