webpack-06-图片处理

发表于 | 分类于 | 本文总阅读量 次
file-loader,url-loader,html-withimg-loader

图片处理

file-loader

处理js中使用的文件

1
2
3
4
{ 
    test: /\.(jpg|png)$/,  
    use: 'file-loader'
}

html-withimg-loader

在html中直接只用img

1
2
3
4
{ 
    test: /\.html$/, 
    use: 'html-withimg-loader'
}

url-loader

可以把较小的图片直接转为base64（依赖于file-loader)

1
2
3
4
5
6
7
8
9
10
11
{ 
    test: /\.(jpg|png)$/, 
    use: { 
        loader: 'url-loader',  
        options: {   
            limit: 200 * 1024, // 小于此大小会直接转为base64，插入到HTML文件中
            outputPath : '/img/'
            publicPtah: 'http://img.chensenran.top'
        }
    }
},
0%