reload=true not work on multi-compiler mode

[Duan He]

• Operating System: mac 10.14
• Node Version:8.9.3
• NPM Version:5.6.0
• webpack Version:4.28.3
• webpack-hot-middleware Version:2.24.3

Expected Behavior

reload browser work.

Actual Behavior

don't work.

Code

mainApp config:

module.exports = {
    name: 'mainApp',
    mode: 'development',
    entry: {
        app: ['webpack-hot-middleware/client?reload=true&name=mainApp', path.resolve(__dirname, 'src/index.js')],
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    }
}

subApp config:

module.exports = {
    name: 'subApp',
    mode: 'development',
    entry: {
        subApp: ['webpack-hot-middleware/client?reload=true&name=subApp', path.resolve(__dirname, 'src/index.js')],
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'SubApp Output Management'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/subApp'
    }
};

server:

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const app = express();
const config = require('./webpack.config.js');
const subConfig = require('../subApp/webpack.config.js');
const compiler = webpack(config);
const subCompiler = webpack(subConfig);

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
}))

app.use(webpackDevMiddleware(subCompiler, {
    publicPath: subConfig.output.publicPath,
}))

const hotCompiler = webpack([config, subConfig]);

app.use(webpackHotMiddleware(hotCompiler));

app.listen(3000, function() {
    console.log('port 3000');
})

How Do We Reproduce?

change the app's code, browser don't auto refresh page. refresh manually works.

[Glen Mailer]

What is the output in the browser console?

[Duan He]

What is the output in the browser console?

@glenjamin

[HMR] connected

in both app's console.

[Glen Mailer]

What is the output in the browser console after making an application code change?

[Duan He]

nothing new.

[Glen Mailer]

Oh, i see now - the problem is in server.js. The dev middleware and hot middleware need to share the same instance of the webpack compiler, otherwise build events will never be triggered.

[Duan He]

Thanks a lot! So i should find dev middleware's multi compile mode or other way to build my projects.

[Glen Mailer]

yep