Webpack Asset Modules support

[colingourlay]

We've been running into problems when porting older stories where some images have been exported as static assets, but contain the text of a JS module with an import value of the original image page. These appear in our output as little white squares (in the case of PNGs). @phocks discovered that it is a side-effect of us using some deprecated asset loaders in the Webpack 5 environment.

Webpack 5 now has built-in support for loading assets which previously required the use of file-loader, url-loader and raw-loader. I've updated the internal Webpack config rules to leverage this feature, and it's solved the issues we were seeing (and is probably more future-proof anyway).

Webpack allows the definition of either asset/resource and asset/inline types to decide whether assets are output as files (with hashed names) or inlined into the JS/CSS (as data-uris). We previously output all but images as resouces and split images between the two strategies on a 10kb threshold. Webpack takes care of this entire thing by giving us the asset type, and automatically selects based on an 8kb threshold (which I think is acceptable).

We were also using the html-loader package to import .html files as raw text. This is now handled by the new webpack asset/source type, so html-loader has also been removed. The ability to import other arbitrary file types as strings has also been enabled (by adding ?raw to your import path). SVG files can also now opt-into raw loading, rather than being handled as an asset (we sometimes like to use them as innerHTML).

[phocks]

Awesome! Simple and effective!

[drzax]

This looks good to me, but I wanted to clarify whether it's a (potentially) breaking change for older projects updating aunty?

[phocks]

@drzax For me, older projects are already breaking whether you update aunty or not. All the older projects I've been working on won't even install the old version of aunty without throwing a million npm errors. So hopefully this is a fixing change and not a breaking change :)

[colingourlay]

@drzax it shouldn't be a breaking change. The only things that have been removed (rather than modernised) are html-loader and the version numbers (appended to SVG and font assets) in the pattern matches.

html-loader was an enhanced raw-loader which did some minifaction (including attribute quote stripping), which we've never relied on, and TBH, probably shouldn't. The version number stuff was ancient Webpack voodoo from when cache staleness workarounds had to be partially implemented with import paths.

Both of those features were historically ported directly from @abcnews/webpacker when aunty implemented Webpack config internally instead of using that dependency.