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

[ivvebndncnnc]

أستخدم webpack 5.44. يحتوي ملف webpack.config.js الخاص بي (وليس المحتوى الكامل) على:

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'
}),
]
}
مع css-loader 5.2.7، تم تضمين الصور في القلم المدخل كعنوان URL للبيانات في CSS الناتج. مع css-loader 6، يتم نقل الصور بدلاً من ذلك إلى دليل الإخراج. دعني أضيف أن ملف src/ndex.js المدخل هو في حد ذاته وحدة ES6:

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

import './css/main.styl';

export default abc;
ما الذي يجب علي تغييره حتى أتمكن من تحويل الصور إلى عناوين URL للبيانات في ملف CSS الناتج؟