Closed dilyanpalauzov closed 3 years ago
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.
This should be included in a “Migration to v6” guide.
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
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.
Added notes about file-loader
and url-loader
https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0, time to migrate
I use webpack 5.44. My webpack.config.js contains (not complete content):
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:
What do I have to change, in order to have the images further converted to data-urls in the resulting css?