Images are not anymore converted to data URI

[dilyanpalauzov]

I use webpack 5.44. My webpack.config.js contains (not complete content):

export default {
    experiments: {
        outputModule: true
    },
    output: {
        library: {
            type: 'module'
        },
        filename: 'abc.js',
        publicPath: '/dist'
    },
    module: {
        rules: [{
            test: /\.styl$/,
            use: [
                MiniCssExtractPlugin.loader,
                preprocessLoader,
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'stylus-loader'
                }
            ]
    },
    plugins: [
        new ESLintPlugin({}),
        new MiniCssExtractPlugin({
            filename: 'abc.css'
        }),
   ]
}

With css-loader 5.2.7 the images in the input stylus were embedded as data-URL in the output CSS. With css-loader 6, the images are instead moved to the output directory. Let me add, that the input src/ndex.js is itself ES6 module:

import abc from './js/abc.js';

import './css/main.styl';

export default abc;

What do I have to change, in order to have the images further converted to data-urls in the resulting css?

[alexander-akait]

Because we use new URL('./image.png', import.meta.url)/new URL('data:something', import.meta.url) webpack handle it using using build-in assets modules https://webpack.js.org/guides/asset-modules/#url-assets, but you don't have assets loader, so webpack apply default options for data URI, i.e. dataUrlCondition.maxSize is 8096 https://webpack.js.org/configuration/module/#ruleparserdataurlcondition (here code https://github.com/webpack/webpack/blob/main/lib/config/defaults.js#L424), so all assets is larger 8096 will be converted to normal URLs, you can redefined this option and increase value:

https://webpack.js.org/guides/asset-modules/#url-assets

 module: {
    rules: [
      {
        test: /\.txt/,
        type: 'asset',
       parser: {
         dataUrlCondition: {
           maxSize: 16 * 1024 // ~16kb
         }
       }
      }
    ]
  },

But I don't recommend it.

[dilyanpalauzov]

This should be included in a “Migration to v6” guide.

[alexander-akait]

I updated info about file-loader and url-loader, can you provide example of your problem, just want to check it and I will update changelog

[dilyanpalauzov]

I confirm, that changing

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

to

    module: {
        rules: [{
            test: /\.png$/,
            type: 'asset'        
       }]
    }  

did help. Using parser.dataUrlCondition was not necessary.

[alexander-akait]

Added notes about file-loader and url-loader https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0, time to migrate