webpack - url-loader 只转换部分文件？

问题描述

问 题

目前是需要内联转base64的图片都用jpg格式。直接引用的使用png格式。但是gif没办法搞定只转换部分（或者实现只转换某些文件夹下的）

//webpack.js 中loader配置
{
    test: /\.(gif|jpg)$/,
    loader: 'url-loader?limit=30000',
    options: {
        name: '[name].[ext]?[hash]'
    }
},
{
    test: /\.(png|svg)$/,//(png|jpg|gif|svg)
    loader: 'file-loader',
    options: {
        name: '[name].[ext]?[hash]'
    }
}

loading.vue组件里面和具体页面中分页需要加载更多的.vue文件中。
【组件中的样式文件引用gif一律希望内联,页面中使用的直接引用。不内联】

解决方案

exclude:使用path.join() 或者 path.resolve() 去处理。不要使用正则或者直接字符串...

{
    test: /\.(gif|jpg|png|svg|ttf|eot|woff|otf)$/,//(png|jpg|gif|svg)//同时处理有问题[建议将正常图片和内联图片分开处理]
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]?[hash]'//[path][name].[ext]?[hash]!./dir/file.png
    },
    exclude:  [path.join(projectRoot, './vue/img')]//[path.join(projectRoot, './vue/img'),path.join(projectRoot, './vue/component')]
},
{
    test: /\.(gif|png|jpg)$/,//所有需要内联的一律 使用jpg
    loader: 'url-loader',//url-loader?limit=30000!./file.gif
    options: {
        limit:30000,//超过limit 使用file-loader 转换
        name: '[path][name].[ext]?[hash]',
    },
    exclude:  path.join(projectRoot, './vue/image')
}

这篇关于webpack - url-loader 只转换部分文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！