的WebPack裝載機動態查詢

我有一個的WebPack裝載機設立SVG文件在我的WebPack的配置，它看起來像這樣的WebPack裝載機動態查詢

const SVGO_CONFIG = JSON.stringify({ 
    plugins: [ 
    {removeTitle: true}, 
    ], 
}); 

const SVG_LOADER = { 
    test: /\.svg$/, 
    loader: 'babel!svg-react!svgo?' + SVGO_CONFIG, 
};

這讓我import SVG文件，如果他們的反應，像這樣的組件

import Icon from 'src/images/icon.svg';

但在某些情況下，我希望能夠告訴svgo-loader剝離從文件fill和stroke屬性。我可以通過在配置中設置另一個插件來實現這一點

const SVGO_CONFIG = JSON.stringify({ 
    plugins: [ 
    {removeTitle: true}, 
    {removeAttrs: {attrs: "(fill|stroke)"}}, 
    ], 
});

但是，這將適用於我導入的所有svg文件。有沒有簡單的方法來標記一個導入語句來稍微修改配置呢？

import TransparentIcon from 'src/images/icon.svg?removeFill`;

我半的解決方案是，將文件保存有額外的擴展（或在不同的文件夾中），但是這將意味着我不會帶或不帶剝離屬性導入它的選項。

來源

2016-04-08 Kyle

有兩種方法：

使用test屬性的正則表達式中兩個獨立的SVG裝載機，就像這樣：

const SVGO_CONFIG = JSON.stringify({ 
    plugins: [ 
    {removeTitle: true}, 
    ], 
}); 

const SVG_LOADER = { 
    test: /\.svg$/, 
    loader: 'babel!svg-react!svgo?' + SVGO_CONFIG, 
}; 

const SVGO_CONFIG_REMOVE_FILL = JSON.stringify({ 
    plugins: [ 
    {removeTitle: true}, 
    {removeAttrs: {attrs: "(fill|stroke)"}}, 
    ], 
}); 

const SVG_LOADER_REMOVE_FILL = { 
    test: /\.svg\?removeFill$/, 
    loader: 'babel!svg-react!svgo?' + SVGO_CONFIG_REMOVE_FILL, 
};

你可以寫自己的裝載機調整查詢串。（這可能是過度設計）：

module.exports = function(content) { 
    return content; 
}; 
module.exports.pitch = function(remainingRequest, precedingRequest, data) { 
    var i; 
    var len = this.loaders.length; 
    var loader; 
    if (this.resourceQuery === '?removeFill') { 
    for (i = 0; i < len; i++) { 
     loader = this.loaders[i]; 
     if (loader.query === '?{"plugins":[{"removeTitle":true}]}') { 
     loader.query = '?' + JSON.stringify({ 
      plugins: [ 
      {removeTitle: true}, 
      {removeAttrs: {attrs: "(fill|stroke)"}}, 
      ], 
     }); 
     } 
    } 
    } 
};

來源

2016-04-08 22:03:02

您可以使用include來達到此目的。例如：

const SVG_LOADER = { 
    test: /\.svg$/, 
    loader: 'babel!svg-react!svgo?' + SVGO_CONFIG, 
    include: [path.join(__dirname, 'svgs/demo.svg', ...] 
};

您需要兩個單獨的規則，像這些。您應該確保它們的include不重疊，否則它們將執行這兩個操作。解決這個問題的一個很好的方法是將每個目錄的svgs拆分並指向那些目錄。

來源

2016-04-08 18:25:56

我有完全一樣的問題。除了我需要檢查svg文件的名稱與其添加。是否有可能這樣做？ test：/.*multicolor\.svg$/ ?? – palyxk

@palyxk如果您需要更易於理解的更復雜的測試，請使用函數。這比維護複雜的正則表達式要容易得多。 –

實際上使用排除是正確的想法，我只是在路徑中混亂 – palyxk

的WebPack裝載機動態查詢

回答

相關問題