在服务器端可以用NGINX使用Webpack-Hot-Middleware吗?

我正在为一个客户端的项目工作,我需要使用webpack的热模块更换function。 我在NGINX后面使用了一个express(节点)应用程序。 我正在使用许多JavaScript框架来devise应用程序,React恰好是其中之一。

我将使用HMRfunction。

我有这样的webpack.config.js:

var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var merge = require('webpack-merge'); var validate = require('webpack-validator'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var styleLintPlugin = require('stylelint-webpack-plugin'); //breaking up into smaller modules //commons module //first var start = { context : __dirname , //entry point defination entry : { app : ['./require.js','webpack-hot-middleware/client?https:127.0.0.1:8195'], vendor : ['angular','angular-animate','angular-messages','angular-aria','angular-route','angular-material','react','react-dom',''webpack-hot-middleware/client?https:127.0.0.1:8195''] }, //output defination output : { path : './public/dist', publicPath: 'https://127.0.0.1:8195/public/dist/', filename : 'app.bundle.js' }, module: { preLoaders: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loaders: ['eslint'] } ], loaders: [ {test: /\.js$/, loader: 'ng-annotate!babel?presets[]=es2015!jshint', exclude: /node_modules/}, { test: /\.css$/, exclude: /(node_modules|bower_components)/, loader: ExtractTextPlugin.extract("style-loader", "css") }, { test: /\.less$/, exclude: /(node_modules|bower_components)/, loader: ExtractTextPlugin.extract("style", "css!less") }, { test: /\.scss$/, exclude: /(node_modules|bower_components)/, loader: ExtractTextPlugin.extract("style", "css!sass") }, { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loaders: ['react-hot', 'babel'], }, { test: /\.woff2$/, loader: 'url' } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"), new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }), new ExtractTextPlugin("styling.css", {allChunks: true}), new ExtractTextPlugin("styling.css", {allChunks: true}), new ExtractTextPlugin("styling.css", {allChunks: true}), //new webpack.optimize.UglifyJsPlugin({ //compress: { // warnings: false // }, //}), // new webpack.optimize.DedupePlugin(), // new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], //target: 'web' }; var config; // Detect how npm is run and branch based on that //choose modules //all modules switch(process.env.npm_lifecycle_event) { case 'build': config = merge(start); break; default: config = merge(start); } //export config module.exports = validate(config); 

我的app.js文件包括:

 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); //webpack development server integration app.use(require("webpack-dev-middleware")(compiler, { noInfo: false, stats: { colors: true, chunks: true, 'errors-only': true }, headers: { "X-Custom-Header": "yes" }, publicPath: webpackConfig.output.publicPath })); app.use(require("webpack-hot-middleware")(compiler, { log: console.log })); 

我的NGINX文件包括

 location / { ... proxy_pass https://127.0.0.1:8195; ... ... } 

当我打开https://127.0.0.1:8195 。 然后创build并提供文件。 Express收听8195端口。 但是,当我打开https://domain-name.com ,文件不送达,但NGINX不显示502错误。

       

网上收集的解决方案 "在服务器端可以用NGINX使用Webpack-Hot-Middleware吗?"