03_加载资源文件

梓旭 • • webpack, 编程

资源文件加载分为如下几种类型：

  • asset/resource 导出资源文件，并返回URL
  • asset/inline 导出一个资源的 data URI，base64编码格式
  • asset/source 导出资源的源代码
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择,通过配置资源体积限制实现

在旧版本中，处理图片使用file-loader 和 url-loader 处理

webpack5已经将两个功能内置到webpack中了，代码中直接引入图片无需配置

index.css

[precode].div{
color:red;
background:url(../images/1.png);
}[/precode]

然后执行编译：

[precode]npx webpack[/precode]

 

配置文件修改：

[precode]{
test:/\.(png|jpe?g|gif|webp|svg)$/i,
type:'asset',
parser:{
dataUrlCondition:{
maxSize:10 * 1024 //10kb
}
}
}[/precode]

文件名配置

在出口设置

[precode]

output : {
path : path.resolve(__dirname, 'dist'),
// 入口文件编译后的js文件路径
filename : 'js/main.js',
clean:true,
//资源文件名设置
assetModuleFilename:'[contenthash][ext]', //资源内容的hash值 和 扩展名

},

[/precode]

在加载器位置设置

[precode]{
test:/\.png$/i,
type:'asset/resource',
generator:{
filename:'[name]-[contenthash][ext]'
}
},[/precode]

[precode]{
test:/\.jpg/i,
type:'asset/inline',
generator:{
filename:'[name]-[contenthash][ext]'
}
},[/precode]

[precode]{
test:/\.txt/i,
type:'asset/source',
generator:{
filename:'[name]-[contenthash][ext]'
}
},[/precode]

[precode]{
test:/\.txt/i,
type:'asset/source',
generator:{
filename:'[name]-[contenthash][ext]'
}
},[/precode]

[precode]{
test:/\.webp/i,
type:'asset',
generator:{
filename:'[name]-[contenthash][ext]'
},
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 4kb
}
}
},[/precode]

处理媒体资源及字体

字体的图标的类型，需要指定为 asset/resource

设置图标的后缀名及存放目录

[precode]{
test:/\.(ttf|woff2?}mp3)$/i,
type:'asset/resource',
generator: {
filename: 'static/fonts/[hash:10][ext][query]'
}
}[/precode]

 

 

 

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>