一、webpack5以前,配置loader
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10]:[ext]',
outputPath: 'imgs',
esModule: false
}
}
},
二、wepback5
二、1.webpack5出现资源模块
资源模块(asset module)是一种模块类型,它允许使用资源文件(字体,图标等)而无需配置额外 loader。
//处理图片文件
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator:{
filename:'imgs/[hash:10].[ext]'
}
},
我们不用再取配置loader,webpack内置的资源模块就能使用资源文件
二、2.type类型及与loader配置的对比。
asset/resource
发送一个单独的文件并导出 URL。之前通过使用 file-loader
实现。asset/inline
导出一个资源的 data URI。之前通过使用 url-loader
实现。
asset/source
导出资源的源代码。之前通过使用 <