Bug report

What is the current behavior?

I know I can import using js, but how can I import in an HTML file or CSS file in Webpack 5?

doing this in css/sass:

background: url("../../images/image.png");

or this in html template:

<img class="logo-img" src="images/favicon.svg" alt="website logo" />

doesn’t work. I just get broken links. What am I missing for these asset modules? I’ve tried them all in all combos with all file extensions. I’ve been adding and deleting stuff but here’s what I have latest:

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

  module: {
    rules: [
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline'
      },
      {
        test: /\.js$/, exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
        ],
      },
    ],
  },

What is the expected behavior?

The image shows up on the page.

Other relevant information: webpack version: 5.4.0 Node.js version: 14.4.0 Operating System: macOS latest version