In my project,I create a file with the content of pictures in the form of SVG.To deal with the picture properly,I make some configurations in the file named webpack.config.js.

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',

    output: {
        filename: 'bundle.js',
        //path必须是绝对路径
        path: path.resolve(__dirname, './dist'),
        clean: true,    //清理生成目录中没有用到的文件
        assetModuleFilename: 'images/[contenthash][ext]'    //指定打包后的文件夹和名称
    },

    mode: 'development',

    devtool: 'inline-source-map',

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'app.html',
            inject: 'body'
        })
    ],

    devServer: {
        //该选项允许配置从目录提供静态文件的选项（默认是'public'文件夹）
        static: './dist'
    },

    module: {
        rules: [
            {
                test: /.png$/,
                type: 'asset/resource',
                generator: {    //generator优先级高于assetModuleFilename优先级
                    filename: 'images/[contenthash][ext]'
                }
            },
            {
                test: /.svg$/,
                type: 'asset/inline'
                /*use: {
                    loader: 'svg-url-loader',
                    options: {}
                }*/
            },
            {
                test: /.txt$/,
                type: 'asset/source'
            }
        ]
    }
}

Well,you can see that I just want webpack handle SVG and end with an url.My webpack vision is 5.And I think this configuration is enough.However,When I run the serve,it throws an error that there is no appropriate loader to deal with SVG picture.Why?

//index.js
import hello from './hello';
import imgsrc from './asset/千峰教育.png';
import logoSVG from './asset/千峰教育.SVG';
import exampleTxt from './asset/example.txt';

hello();
const img = document.createElement('img');
img.src = imgsrc;
document.body.appendChild(img);

const img2 = document.createElement('img');
img2.style.cssText = 'width:600px;height:200px'
img2.src = logoSVG;
document.appendChild(img2);

const block = document.createElement('div');
block.style.cssText = 'width:200px;height:200px;background:aliceblue';
block.textContent = exampleTxt;
document.body.appendChild(block);

The error

I expect the webpack could deal with SVG picture properly and ends with an url.