托管與Webpack捆綁在一起的Web應用

Question

我已經在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: './'
  }
};

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，並且不會包含/要求我們在開發過程中使用的“運行”模塊。 之后，您可以將最新的bundle.js部署到服務器。

提示2：在里面webpack.config output:{...}部分，您應該設置path和publicPath到一個新的目錄如/公/。 否則在Firebase主機上，當您提到“公共”目錄作為要部署的默認目錄時-它將創建問題，並且應用程序將無法在Firebase服務器上運行。

注意：實際上，我不確定並且不知道如何告訴firebase使用我的根目錄而不是我的“ public”文件夾中的文件，但是我認為輸出Webpack生成的文件並將其他公共文件（ css, html ）保留在公共內部文件夾很好，否則firebase deploy可能還會上傳位於根目錄中的其他文件。 （如果我錯了糾正我）。

好的，最后，當您更新webpack.config輸出值時，如下所示：

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

然后（最后確保也完成了Tip.1的操作）並運行命令以獲取最新的bundle.js

  npm開始 

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

  火力基地部署 

我相信您在執行上一個deploy命令之前，可能已經遵循了啟動firebase login和其他init命令的初始步驟。

注意： "firebase serve"命令還有助於調試和測試應用程序是否在本地計算機上運行良好，然后它也將在實時Firebase服務器上運行良好。