託管與webpack捆綁在一起的web應用

我已經在Stephen Grider的ReduxSimpleStarter之上構建了一個web應用，這是一個反應簡化的樣板。它使用Webpack進行捆綁。現在我想在firebase上託管我的應用程序。當我這樣做時，捆綁不起作用，我只剩下一個簡單的index.html。託管與webpack捆綁在一起的web應用

難道有人請解釋我如何觸發未本地託管的應用程序的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: './' 
    } 
};

來源

2016-02-23 Nico

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

來源

2016-02-28 02:00:53 Nico

我也試圖使用webpack捆綁我的應用程序，然後使用'firebase serve'運行它，任何提示？ – astiefel

我知道這是回答，但這是一個附加的註釋的答案，這將有很大的幫助。

提示1： 在部署上火力地堡的應用程序並嘗試訪問瀏覽器（尤其是反應，終極版）應用程序，你可能會得到一個錯誤說：

can not find module "run" in bundle.js

所以如前所述在這個答案是必須的，並在此之後，你必須執行命令：

npm start

此命令將重新生成 bundle.js並將不包括/要求 「運行」正在開發中使用的模塊。之後，您可以將最新的bundle.js部署到服務器。

提示2：在webpack.config內output:{...}部分應設置path和publicPath到一個新的目錄即/公/。否則，Firebase主機當您提到'public'目錄作爲要部署的默認目錄時 - 那麼它會產生問題，並且應用程序將無法在Firebase服務器上運行。

注：其實我不知道，不知道如何告訴火力點在我的「公共」文件夾 在我的根使用的文件，而不是，但我認爲，輸出的WebPack生成的文件，並保持其他公共文件（css, html）在公用文件夾內是好的，否則firebase部署也可能上傳坐在根目錄中的其他文件。（如我錯了請糾正我）。

好吧所以最後當你更新webpack。配置輸出值：

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

然後（最終確保您使用Tip.1要做的事），然後運行命令，以獲得最新bundle.js

npm start

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

firebase deploy

我相信在運行上次部署命令之前，您可能已經按照初始步驟啓動了 firebase login和其他init命令。

注意："firebase serve"命令對調試和測試應用程序是否在本地計算機上運行良好也很有幫助，因此它在運行的Firebase服務器上運行良好。

來源

2016-09-30 10:15:19

託管與webpack捆綁在一起的web應用

回答

相關問題