Webpack 2+:如何为具有相同扩展名的文件应用不同的加载器？

Question

这是我的用例:大多数svgs都应该内联.所以我设置了这样的规则:

{test: /\.svg$/, use: "svg-inline-loader"},

在某些情况下,我只想要一个svg的url而不是内联它.在webpack 1.x中,我要求他们这样:require('path/to/file.svg?external').

这是相应的规则:

{test: /\.svg\?external$/, use: "file-loader!image-webpack-loader"},

看起来webpack 2 在规则中?不再包含该部分,test因为迁移后只有第一条规则应用于我的所有 svgs.

有没有解决的办法？是否可能有不同的策略如何在相同扩展名的文件中应用不同的加载器集合require？

PS:我知道我可以要求这样的文件:require('!file-loader!image-webpack-loader!path/to/file.svg')但是我的加载器比这更复杂,我不想一直重复它们的配置.

PSS:这似乎也不起作用(它仍然只适用第一条规则)

{test: /\.svg$/, use: "svg-inline-loader", exclude: /\?external/},
{test: /\.svg$/, use: "file-loader?!image-webpack-loader", include: /\?external/}

Answer 1

所以我最近参加了webpack的JuhoVepsäläinen的演讲,并在这张幻灯片中找到了答案:

{
  test: /.css$/,

  oneOf: [
    {
      resourceQuery: /inline/, // foo.css?inline
      use: 'url-loader',
    },
    {
      resourceQuery: /external/, // foo.css?external
      use: 'file-loader',
    },
  ],
}

resourceQuery救援!

Answer 2

resolveLoader.alias 将是您的解决方案.

您的配置如下所示:

resolveLoader: {
  alias: {
    myLoader1: "svg-inline-loader", // and much more
    myLoader2: "file-loader!image-webpack-loader" // and much more
  }
}

和用法:

require('myLoader1!path/to/file1.svg');
require('myLoader2!path/to/file2.svg');

或者,如果你想要例如myLoader1配置是默认的,并且不时使用myLoader2加载器使用这种配置:

{
  test: /\.svg$/,
  use: "svg-inline-loader" // and much more
}

// ...

resolveLoader: {
  alias: {
    myLoader: "file-loader!image-webpack-loader" // and much more
  }
}

并使用这样的:

require('path/to/file1.svg'); // default svg-inline-loader
require('!myLoader!path/to/file2.svg'); // specific file-loader!image-webpack-loader
// ! at the beginning - disables loaders from default
// and myLoader enables file-loader and image-webpack-loader

PS.我在这里有类似的问题,它适用于webpack 1,但文档说它的resolveLoader.alias工作方式相同.