无法获得多应用程序 webpack 配置以与 react-hot-loader 一起使用

Question

我有一个基本设置，每个应用程序都在一个单独的目录中，我正在使用自定义服务器使用webpack-dev-middleware/webpack-hot-middleware编译它们。一切正常，除了我无法让 HMR 适用于第二个应用程序(我正在使用react-hot-loader)。

下面是说明问题的最小存储库：https://github.com/AmrN/multi-react-app-hmr

我的主要代码文件：

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function (appName) {
return {
devtool: 'cheap-module-eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client',
path.join(__dirname, appName, 'index'),
],
output: {
path: path.join(__dirname, 'dist', appName),
filename: 'bundle.js',
publicPath: '/'+appName+'/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, appName, 'index.html'),
}),
],
module: {
loaders: [{
test: /.jsx?$/,
loaders: ['babel-loader'],
exclude: /node_modules/,
}]
},
};
};

服务器.js

var path = require('path');
var webpack = require('webpack');
var express = require('express');
var config1 = require('./webpack.config')('app1');
var config2 = require('./webpack.config')('app2');
var app = express();
[config1, config2].forEach((config) => {
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
});
app.listen(3000, function (err) {
if (err) {
return console.error(err);
}
console.log('Listening at http://localhost:3000/');
});

(app1|app2)/index.js

import { AppContainer } from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const rootEl = document.getElementById('root');
const render = Component =>
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
rootEl
);
render(App);
if (module.hot) module.hot.accept('./App', () => render(App));

现在，如果我运行服务器，我的文件已正确编译，我可以成功访问http://localhost:3000/app1/index.html，并且 HMR 在这里正常工作。但是，如果我在打开http://localhost:3000/app2/index.html访问第二个应用程序，但 HMR 不起作用并查看控制台，它会给我以下错误：

获取 http://localhost:3000/app2/640a44b6b47b67436af2.hot-update.json 404(未找到)

[HMR] 找不到更新(需要完全重新加载)

[HMR](可能是因为重新启动服务器)

我注意到的另一件事是，更改我在服务器中应用应用程序 webpack 配置的顺序.js从：

[config1, config2].forEach((config) => {...})

自：

[config2, config1].forEach((config) => {...})

将问题切换到 app1，现在 HMR 适用于 app2，但不适用于 app1。

任何帮助不胜感激，谢谢。

Answer 1

问题是两个应用程序使用相同的路径进行热重载(我认为默认情况下它是/__webpack_hmr)。 所以我不得不为每个使用不同的：

在webpack.config中.js我做到了：

entry: [
// ...
'webpack-hot-middleware/client?path=/__webpack_hmr_'+appName,
// ...
]

在服务器.js中：

app.use(require('webpack-hot-middleware')(compiler, {
path: '/__webpack_hmr_'+appName
}));

现在它工作正常。