javascript - 带有动态查询的 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,
};

这允许我导入 svg 文件，就好像它们是这样的 react 组件

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

但在某些情况下，我希望能够告诉 svgo-loader 从文件。我可以通过在配置中设置另一个插件来做到这一点

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

但这适用于我导入的所有 svg 文件。有没有一种简单的方法来标记导入语句以像这样稍微修改配置？

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

我的半解决方案是使用额外的扩展名保存文件(或在不同的文件夹中)，但这意味着我无法选择在删除属性或不删除属性的情况下导入它。

Answer 1

有两种方法:

1. 在两个单独的 SVG 加载器中使用 test 属性的正则表达式，如下所示:

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