之前版本file-loader,url-loader能够处理输出css样式中的图片和字体文件,webpack5已经可以使用内建的资源模块类型(asset module type),html中的img标签图片还需要使用html-loader。
资源模块类型可以规定以下4种type属性值
type: asset/resource 之前版本的 file-loader 功能
type: asset/inline 之前版本的url-loader 输出为base64编码
type: asset/source 之前版本的raw-loader 导出源代码
type: asset 之前版本的url-loader 这个可以规定小于多少kb时输出base64编码

自定义输出文件名

generator: {
    filename: '[hash:6][ext][query]'
}

或者在output对象添加assetModuleFilename: ‘images/[hash][ext][query]

url-loader能在小于规定kb时自动把图片转为base64编码,现在使用以下实现

parser:{
    dataUrlCondition:{
        maxSize: 8*1024
    }
}

如果想继续用这些loader可以添加type: ‘javascript/auto’属性值