Inline loaders are ignore in webpack 5

Bug report

What is the current behavior?

Inline loaders are ignored if webpack configuration has rules for these files.

const testImage = require('!file-loader!./images/test-image.png');
const testIcon = require('!html-loader!image-webpack-loader!./images/test-icon.svg');

console.log('> testImage', testImage);
console.log('> testIcon', testIcon);

// from storybook's webpack configuration
{
  test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
  type: 'asset/resource',
  generator: { filename: 'static/media/[path][name].[ext]' }
}

results in

> testImage file:///D:/projects/tests/webpack-5-inline-loaders/dist/static/media/src/images/test-image..png
> testIcon file:///D:/projects/tests/webpack-5-inline-loaders/dist/static/media/src/images/test-icon..svg

If the current behavior is a bug, please provide the steps to reproduce.

https://github.com/artaommahe/webpack-5-inline-loaders

code https://github.com/artaommahe/webpack-5-inline-loaders/blob/main/src/index.js webpack config https://github.com/artaommahe/webpack-5-inline-loaders/blob/main/webpack.config.js

• git clone
• yarn install
• yarn webpack
• open dist/index.html
• see undefined for images and this in console

  > testImage file:///D:/projects/tests/webpack-5-inline-loaders/dist/static/media/src/images/test-image..png
  > testIcon file:///D:/projects/tests/webpack-5-inline-loaders/dist/static/media/src/images/test-icon..svg
  

• comment out images rule in webpack config
• yarn webpack
• see expected result as

  > testImage Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}default: "file:///D:/projects/tests/webpack-5-inline-loaders/dist/6af9ab209f7be65032e1462798741a97.png"
  > testIcon Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}default: "<svg ..."
  

Same if !! is used.

What is the expected behavior?

Expected result is overriding rule with the inline loaders as it worked in webpack 4.x.

Other relevant information: webpack version: 5.41.1 Node.js version: 12.18.1 Operating System: Win10 Additional tools:

"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"image-webpack-loader": "^7.0.1",
"webpack": "^5.41.1",
"webpack-cli": "^4.7.2"

first found in https://github.com/storybookjs/storybook/issues/15438, than narrowed to the clean webpack’s issue

[alexander-akait]

To be honestly inline loader syntax is hack from the past, when dreamed about ES modules, now we have them and even more we have import foo from './something.ext' assert { type: "something" }, of course we can probably see how improve inline syntax for context requests, but I think we need to get away from this syntax as soon as possible in favor import something from './something?query' and in future in favor import assertion. I can open this problem, but again, most likely it will not be fixed in the near future and perhaps never…

Anyway feel free to feedback

[artaommahe]

we try to avoid inline syntax and strongly recommend do not use it, it is old legacy stuff, we are on es modules, so we can use query or assert (will be in near future)

For us the main issue is tooling and different webpack configs. E.x. angular and storybook for angular use different loaders at least for images. For consistent behavior we have to use inline loaders, but now they are ignored by assets modules rules and we have to fine-tune storybook’s webpack config… It doesn’t look like scalable solution.