webpack解析图片、字体

file-loader

1. 图片加载

 {
    test:/.(png|jpg|gif|jpeg)$/,
    use:"file-loader"
 }

2. 字体加载

@font-face{
    font-family:"FZZJ-LongYTJW";
    src:url('./images/FZZJ-LongYTJW.TTF');
} 
.search-text{
    font-size:20px;
    color: red;
    font-family: "FZZJ-LongYTJW";
}

{
    test:/.(woff|woff2|eot|ttf|otf|TTF)/,
    use:"file-loader"
}

url-loader

可以设置较小资源自动转换为base64，其内部实现也是使用file-loader

{
     test:/.(png|jpg|gif|jpeg)$/,
     use:{
             loader:"url-loader",
             options:{
                        limit:10240 //不超过10K时，将其转化为base64
                    }
           }
 }