This is an example for child-compiler-loader-list-webpack-plugin, a plugin originally written to help stitch together building a static html file with html-webpack-plugin and extract-text-webpack-plugin. The issue was extract-text-webpack-plugin will error if any files it extracts are referred directly or indirectly from the template html-webpack-plugin since that template can be generated by javascript that can just run the application to build what the application would first build when viewed by a user.

The benefit of that process is gained by slow connections like mobile networks that take a while to load a large JS file. Building the static page and baking in the initial dom that js file would generate can let the browser load assets and render them in parallel with loading the script. To that end this example uses large images and an arbitrarily large script to help demonstrate the benefit. It'll be most noticable to open the built pages in a browser with its developer tools open to disable caching and throttle the connection to a slower speed. The baked page will download the images and render the first while the large JS file finishes loading. The unbaked page, not containing that initial DOM setup, will have to finish loading the JS file before being able to render the page, let alone load the image.