Webpack 2+: How to apply different loaders for files with same extension?

Question

Here\'s my use-case: Most svgs should be inlined. So I setup a rule like this:

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

In some insta

Answer 1

So I recently attended a talk by webpack's Juho Vepsäläinen and found the answer in this slide:

{
  test: /.css$/,

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

resourceQuery to the rescue!