webpack file-loader和url-loader用法

图片打包关键要用到file-loader或url-loader，其中url-loader与file-loader功能基本一致，只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。

{
    test: /\.(png|jpg|gif|svg)$/,
    use: ['file-loader']，

    options: {
        name: 'images/[name].[ext]'
    }

}
或者

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader'，

    options: {
        name: 'images/[name].[ext]'
    }

}

除了使用file-loader对图片进行打包处理外，我们同样也可以使用url-loader代替，另外我们还可以对小于某个大小的图片进行base64格式的转化处理。

 

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        name: './images/[name].[ext]',
        limit: 8192
    }
}



当配置limit上限值，url-loader依赖file-loader，两个loader都需要下载