具有动态查询的Webpack加载程序

Question

我在webpack配置中为SVG文件设置了Webpack加载程序，看起来像这样

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

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

这使我可以import svg文件，就像它们是React组件一样

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`;

我的半解决方案是使用额外的扩展名（或在其他文件夹中）保存文件，但这意味着无论是否去除属性，我都无法选择导入文件。

Answer 1

您可以为此使用include 。 例：

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

您将需要两个类似的规则。 您应确保它们的include不重叠，否则它将同时执行。 解决此问题的一种好方法是将每个目录的svg分割并指向这些目录。

Answer 2

有两种方法：

1. 在两个单独的SVG加载器中使用test属性的regex，如下所示：

    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, }; 

2. 您可以编写自己的加载器来调整查询字符串。 （这可能是过度设计）：

    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)"}}, ], }); } } } };