kisenka/app.js

## app.js
require('./styles.css');

## child-compilation-plugin.js
const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
const JsonpTemplatePlugin = require("webpack/lib/JsonpTemplatePlugin");
const ChildCompiler = require('webpack-toolkit').ChildCompiler;

class Plugin {
  apply(compiler) {
    const host = compiler.options.devServer.host;
    const port = compiler.options.devServer.port;

    compiler.plugin('make', (compilation, done) => {
      // This is just handy wrapper over the compilation.createChildCompiler(compilerName, outputOptions)
      const childCompiler = new ChildCompiler(compilation);

      // Original webpack child compiler instance
      const originCompiler = childCompiler._compiler;

      // Add Jsonp runtime to the bundle for proper updates receiving (see webpack/lib/JsonpMainTemplate.runtime.js)
      originCompiler.apply(new JsonpTemplatePlugin());

      // Add separate multi-entry with webpack-dev-server and HMR runtime
      originCompiler.apply(
        new MultiEntryPlugin(originCompiler.options.context, [
          `webpack-dev-server/client/index?http://${host}:${port}`,
          'webpack/hot/only-dev-server',
          './app'
        ], 'child-entry')
      );

      childCompiler.run()
        .then(compilation => done())
        .catch(done);
    });
  }
}

module.exports = Plugin;

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Page with Hot module replacement</h1>
<script src="/main-entry.js"></script>
<script src="/child-entry.js"></script>
</body>
</html>

## package.json
{
  "name": "webpack-hot-module-replacement-with-child-compiler",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "webpack-toolkit": "^0.7.9"
  }
}

## styles.css
body {
    background-color: green;
}

## webpack.config.js
const path = require('path');
const ChildCompilationPlugin = require('./child-compilation-plugin');

module.exports = {
  entry: {
    'main-entry': './app'
  },

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    pathinfo: true
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

  devServer: {},

  plugins: [
    new ChildCompilationPlugin()
  ]
};
	const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
	const JsonpTemplatePlugin = require("webpack/lib/JsonpTemplatePlugin");
	const ChildCompiler = require('webpack-toolkit').ChildCompiler;

	class Plugin {
	apply(compiler) {
	const host = compiler.options.devServer.host;
	const port = compiler.options.devServer.port;

	compiler.plugin('make', (compilation, done) => {
	// This is just handy wrapper over the compilation.createChildCompiler(compilerName, outputOptions)
	const childCompiler = new ChildCompiler(compilation);

	// Original webpack child compiler instance
	const originCompiler = childCompiler._compiler;

	// Add Jsonp runtime to the bundle for proper updates receiving (see webpack/lib/JsonpMainTemplate.runtime.js)
	originCompiler.apply(new JsonpTemplatePlugin());

	// Add separate multi-entry with webpack-dev-server and HMR runtime
	originCompiler.apply(
	new MultiEntryPlugin(originCompiler.options.context, [
	`webpack-dev-server/client/index?http://${host}:${port}`,
	'webpack/hot/only-dev-server',
	'./app'
	], 'child-entry')
	);

	childCompiler.run()
	.then(compilation => done())
	.catch(done);
	});
	}
	}

	module.exports = Plugin;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<h1>Page with Hot module replacement</h1>
	<script src="/main-entry.js"></script>
	<script src="/child-entry.js"></script>
	</body>
	</html>
	{
	"name": "webpack-hot-module-replacement-with-child-compiler",
	"version": "0.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack-dev-server --hot"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"css-loader": "^0.26.1",
	"style-loader": "^0.13.1",
	"webpack": "^2.2.1",
	"webpack-dev-server": "^2.3.0",
	"webpack-toolkit": "^0.7.9"
	}
	}
	const path = require('path');
	const ChildCompilationPlugin = require('./child-compilation-plugin');

	module.exports = {
	entry: {
	'main-entry': './app'
	},

	output: {
	path: path.resolve(__dirname, 'build'),
	filename: '[name].js',
	pathinfo: true
	},

	module: {
	rules: [
	{
	test: /\.css$/,
	use: [
	'style-loader',
	'css-loader'
	]
	}
	]
	},

	devServer: {},

	plugins: [
	new ChildCompilationPlugin()
	]
	};