我有一个基本设置,其中两个应用程序位于不同的目录中,我使用自定义服务器使用
现在,如果我运行服务器,我的文件会被正确编译,并且我可以成功访问
任何帮助都将不胜感激,谢谢。
webpack-dev-middleware
/webpack-hot-middleware
编译它们。一切都运行正常,除了我无法让第二个应用程序(我正在使用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/,
}]
},
};
};
server.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不起作用,并且查看控制台,它给我以下错误:
我还注意到的另一件事是,如果我在server.js中应用我的应用程序webpack配置的顺序从:GET http://localhost:3000/app2/640a44b6b47b67436af2.hot-update.json 404 (未找到)
[HMR] 找不到更新(需要完全重新加载)
[HMR] (可能是由于重新启动服务器)
[config1, config2].forEach((config) => {...})
到:
[config2, config1].forEach((config) => {...})
将问题切换到app1,现在HMR适用于app2,但不适用于app1。任何帮助都将不胜感激,谢谢。