托管与网络包捆绑在一起的 Web 应用程序

Hosting web app bundled with webpack

本文关键字：Web 应用程序 在一起 包捆绑 网络      更新时间：2023-09-26

我在Stephen Grider的ReduxSimpleStarter（一个react-redux样板）之上构建了一个Web应用程序。它使用Webpack进行捆绑。现在我想在Firebase上托管我的应用。当我这样做时，捆绑不起作用，我只剩下一个简单的索引.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: './'
  }
};

我找到了解决方案。在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"
      },
我知道

它得到了回答，但这是答案的附加说明，这将有很大帮助。

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

在捆绑包中找不到模块"运行".js

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

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

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

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

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

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

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

npm start
。最后，您可以使用：
firebase deploy
进行部署，我相信您可能已经按照启动 firebase login 和其他 init 命令的初始步骤进行操作，然后再运行最后一个部署命令。

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

相关文章：