欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack对同类型文件的不同打包处理

程序员文章站 2022-03-10 15:48:22
...

当我们写webpack的rule匹配规则进行打包时,往往会将一种类型的文件使用只一种打包loader方式

当有时候我们需要对同一个文件类型进行两种不同方式的打包处理时,我们可以使用到webpack提供的oneOf

{
    test: /.svg$/,
    oneOf: [{
        resourceQuery: /inline/,
        use: 'url-loader'
    }, {
     use: 'raw-loader'
    }]
}

当规则匹配时,只使用第一个匹配规则

举例:如果我们要让一个svg文件使用url-loader的打包方式,那么我们可以这样引入svg文件

import ICON from 'icon.svg?inline'

这样它就会匹配到oneOf中的/inline/规则,执行url-loader,一旦匹配到了,那么他就不会执行后面的loader了

可以理解为switch,在每一个case后面都带有一个break,最后再加上一个default,用来处理以上都没有匹配到的情况

 

相关标签: webpack loader