无法让多应用 webpack 配置与 react-hot-loader 一起使用答案

【问题标题】：Can't get a multi-app webpack configuration to work with react-hot-loader无法让多应用 webpack 配置与 react-hot-loader 一起使用
【发布时间】：2017-11-13 08:38:47
【问题描述】：

我有一个基本设置，两个应用程序分别位于一个单独的目录中，我使用自定义服务器使用 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/,
      }]
    },
  };
};

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 无法正常工作并查看控制台会出现以下错误：

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

[HMR] 找不到更新（需要完全重新加载）

[HMR]（可能是因为重启了服务器）

我注意到的另一件事是更改了我在 server.js 中应用我的应用程序 webpack 配置的顺序：

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

到：

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

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

感谢您的帮助。

【问题讨论】：

标签： webpack react-hot-loader webpack-dev-middleware webpack-hot-middleware

【解决方案1】：

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

在 webpack.config.js 我做了：

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

在 server.js 中：

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

现在它可以正常工作了。

【讨论】：