Scripts: Way to override loader options for build commands

[samikeijonen]

What problem does this address?

It is currently difficult to override different loader options (as far as I understand). For example css-loader by default handles font URLs like this:

url(fonts/font-name.839e5a20.woff2)

This makes it hard to preload fonts because it has random hash in the name. Therefore we usually don't do anything for url() rules in the CSS. We don't usually even copy font files to build folder.

There is option for disabling url behavior:

{
    loader: 'css-loader',
        options: {
            sourceMap: !isProduction,
            // Disable url rules.
            url: false,
        },
},

What is your proposed solution?

Quick way to extend or override loaders options. But I'm not sure how to actually implement that. Unless there is a way already :)

[gziolo]

There is something that allows customization for PostCSS loader:

https://github.com/WordPress/gutenberg/blob/70b1cde3bcf186059f0e4ee7396717046b96569b/packages/scripts/config/webpack.config.js#L40L50

We could have something similar for CSS loader. Is there anything formalized in their docs?

[samikeijonen]

As far as I know css-loader doesn't have similar logic than in PostCSS loader and with file like postcss.config.js.

One idea is that loaders are exposed like in Webpack helpers package.

For example:

loaders.css.defaults = {
    loader: require.resolve( 'css-loader' ),
    options: {
        sourceMap: !isProduction,
    },
};

Then we could change the option for example like this: loaders.css.defaults.options.url = false;.

[gziolo]

Sharing the full link to webpack helpers from Human Made: https://humanmade.github.io/webpack-helpers/. It's an excellent collection of utils that largely overlaps with the needs of @wordpress/scripts.