webpack對同類型文件的不同打包處理

當我們寫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,用來處理以上都沒有匹配到的情況

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章