Webpack “Invalid configuration object” when using type: “asset/resource”

I am new to webpack, and am trying to use images for the first time, following this tutorial. My ultimate goal is to be able to refer to an image in CSS, something like this: background-image: url("assets/bg.png");

Here is my config.

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "."),
    filename: "public/main.js",
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        // This part does not work:
        test: /.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

It works without the rule for images, but with it I get the following error when building:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module.rules[2].type should be one of these:
  “javascript/auto” | “javascript/dynamic” | “javascript/esm” | “json” | “webassembly/experimental”
  -> Module type to use for the module

I’m not sure what I’m doing wrong and would really appreciate some tips.

(I’m using Webpack 5.74.0)