Overwriting compiler cache causes breaks webpack 5

[niieani]

Expected behaviour

html-webpack-plugin shouldn't crash when building/rebuilding in webpack 5

Current behaviour

This part of compiler.js overwrites webpack's internal cache property with a plain object:

html-webpack-plugin/lib/compiler.js

Lines 122 to 132 in 65879eb

	// Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
	// Hot module replacement requires that every child compiler has its own
	// cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
	childCompiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
	if (compilation.cache) {
	if (!compilation.cache[compilerName]) {
	compilation.cache[compilerName] = {};
	}
	compilation.cache = compilation.cache[compilerName];
	}
	});

In Webpack 5 cache is no longer an Object, but an instance of Cache:

https://github.com/webpack/webpack/blob/477f786781faed10d19dcd6582f83b3230d4a233/lib/Compiler.js#L132

This causes Webpack to crash, since it's expecting something else than a plain object.

Suggested fix

EDIT: Update from @sokra:

This can be removed. It could also be removed for webpack 4.

---

Original suggestion:

My suggestion would be to replace this line:

html-webpack-plugin/lib/compiler.js

Line 128 in 65879eb

compilation.cache[compilerName] = {};

With:

compilation.cache[compilerName] = new compilation.cache.constructor();

This will be both:

• backwards compatible, because new {}.constructor() is also an empty object
• forwards compatible, because new compilation.cache.constructor() will create a new instance of Webpack's Cache.

Ideally though, we probably shouldn't store the child compiletion's Caches as properties of the main Cache, but perhaps keep them in an internal Map?

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, webpack, and html-webpack-plugin. Run the following to get it quickly:

Node.js 10.11.0
webpack#next (from GitHub)
html-webpack-plugin#master (from GitHub)

Config

Any webpack.config.js will reproduce the issue, e.g.:

module.exports = {
  entry: 'app.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ]
}

[jantimon]

The major 4 version dropped support for webpack 3 so I think we might just remove that part

[bbrzoska]

@jantimon yeah, let's do it that way 👍

[jantimon]

Fixed with #1102