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

Question

我已经在 Stephen Grider 的 ReduxSimpleStarter, a react-redux boilerplate. It uses Webpack for bundling. Now I want to host my app on firebase. When I do so, the bundling doesn't work, and I am left with a simple 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

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

Answer 2

我知道有人回答了，但这是对答案的附加说明，会有很大帮助。

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

can not find module "run" in bundle.js

因此，如答案中所述，这是必须的，在此之后-您必须执行命令：

npm start

此命令将重新生成 bundle.js 而不会 include/require 我们正在使用的 "run" 模块发展。在此之后 - 您可以将最新的 bundle.js 部署到服务器。

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

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

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

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

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

npm start

。最后，您可以使用以下方法进行部署：

firebase deploy

我相信您可能在运行上次部署命令之前遵循了启动 firebase login 和其他初始化命令的初始步骤。

注意："firebase serve" 命令也有助于调试和测试应用程序是否在本地机器上运行正常，那么它在实时 Firebase 服务器上也会运行正常。

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

Hosting web app bundled with webpack

javascript

web-applications

webpack

webpack-dev-server