我正在使用 react-hot-loader 和 webpack。我还将 webpack-dev-server 与 express 后端一起使用。
这是我用于开发的相关 webpack 配置：
var frontendConfig = config({
entry: [
'./src/client/app.js',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/dev-server'
],
output: {
path: targetDir,
publicPath: PROD ? '/build/assets/' : 'http://localhost:3000/build/assets/' ,
filename: 'app.js'
},
module: {
loaders: [
{test: /\.js$/,
exclude: /node_modules/,
loaders: PROD ? [babelLoader] : ['react-hot', babelLoader] }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin({ quiet: true })
]
});
使用此配置，我启动 webpack 和 webpack-dev-server
gulp.task('frontend-watch', function() {
new WebpackDevServer(webpack(frontendConfig), {
publicPath: frontendConfig.output.publicPath,
hot: true,
stats: { colors: true }
}).listen(3000, 'localhost', function (err, result) {
if(err) {
console.log(err);
}
else {
console.log('webpack dev server listening at localhost:3000');
}
});
});
所以 webpack-dev-server 在 localhost:3000 运行并app.js从 webpack watcher 接收（现在不再写入文件系统）。
我的 express 服务器用作后端/api，并具有以下配置：
var express = require('express');
// proxy for react-hot-loader in dev mode
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({
changeOrigin: true,
ws: true
});
var isProduction = process.env.NODE_ENV === 'production';
// It is important to catch any errors from the proxy or the
// server will crash. An example of this is connecting to the
// server when webpack is bundling
proxy.on('error', function(e) {
console.log('Could not connect to proxy, please try again...');
});
module.exports = function (app) {
// We only want to run the workflow when not in production
if (!isProduction) {
console.log('setting up proxy for webpack-dev-server..');
// Any requests to localhost:4200/build is proxied
// to webpack-dev-server
app.all('assets/app.js', function (req, res) {
proxy.web(req, res, {
target: 'http://localhost:3000'
});
console.log('request proxied to webpack-dev!');
});
}
var server = require('http').createServer(app);
app.use(express.static(homeDirectory + '/build'));
app.use(express.static(homeDirectory + '/files'));
server.listen(4200);
};
到目前为止一切都很好，代理工作app.js，我在浏览器控制台中看到成功的热更新消息：
现在，虽然它看起来不错，但它并没有像我预期的那样工作：
- 当我更改组件的 render() 方法时，它会按预期更新，但是当我更改辅助方法（在 render() 中使用）时，我不会得到任何热更新。这正常吗？
- 另一件让我烦恼的事情，如果我像这样工作，并在某个时候重新加载“硬”浏览器，我所做的所有更改都会恢复到我启动 webpack-dev-server 的点 - 两者之间的所有热更新都有没有以某种方式坚持。这也正常吗？我希望我会失去我的状态，但同时不会对代码进行任何更改。这可能与我
app.js没有被写入文件系统有关。