的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装载机动态查询

回答

相关问题