webpack-资源模块类型
webpack-资源模块类型
⽂章⽬录
1、asset
通过asset 不需要额外安装loader
在webpack5之前，加载这些资源我们需要使⽤⼀些loader，⽐如raw-loader 、url-loader、file-loader；
svg的类型有几种在webpack5之后，我们可以直接使⽤资源模块类型（asset module type），来替代上⾯的这些loader；资源模块类型(asset module type)，通过添加4 种新的模块类型，来替换所有这些loader：asset/resource 发送⼀个单独的⽂件并导出URL。之前通过使⽤file-loader 实现；
asset/inline 导出⼀个资源的data URI。之前通过使⽤url-loader 实现；
asset/source 导出资源的源代码。之前通过使⽤raw-loader 实现；
asset 在导出⼀个data URI 和发送⼀个单独的⽂件之间⾃动选择。之前通过使⽤url-loader，并且配置资源
体积限制实现
{
test:/\.(png|jpe?g|gif|svg)$/,
// type: "asset/resource", file-loader的效果
// type: "asset/inline", url-loader
type:'asset',
// 设置⽂件名称
generator:{
filename:'img/[name].[hash:6][ext]',
},
// 配置资源体积
parser:{
dataUrlCondition:{
maxSize:100*1024,
},
},
},
{
test:/\.ttf|eot|woff2?$/i,
type:'asset/resource',
generator:{
filename:'font/[name].[hash:6][ext]',
},
},
2、加载字体⽂件
针对字体和字体图标的处理
{
test:/\.ttf|eot|woff2?$/i,
type:'asset/resource',
generator:{
filename:'font/[name].[hash:6][ext]',
},
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。