javascript - Webpack 5 使用新的资产/资源类型而不是文件加载器从根目录导入图像资产文件

Question

使用 Webpack 5，我想使用新的内置asset/resource类型从根目录导入图像。

import Icon from 'assets/images/heart.svg';

而不是

import Icon from '../../assets/images/heart.svg';

context在 Webpack 4 中，启用此功能的是文件加载器的选项。

{
    test: /images\/(.*)\.(png|jpg|gif|svg)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192,
            name: '[path][name].[ext]',
            context: './app/assets'
        }
    }]
}, {
    test: /images\/(.*)\.ico$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]',
            context: './app/assets'
        }
    }]
}

在推荐使用新的内置asset/resource类型的 Webpack 5 中，我找不到这样做的方法。

{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource',
}

任何帮助，将不胜感激！

标签： javascriptwebpackwebpack-5