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

resolveLoader.alias will be solution for you.

Your config will look like this:

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

and usage:

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

---

Or if you want for example myLoader1 config to be default and from time to time use myLoader2 loaders use this kind of config:

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

// ...

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

and use like this:

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. I had similar question here it's for webpack 1 but documentation says that resolveLoader.alias works the same.