Webpack 2+: How to use different downloaders for files with the same extension?

Question

Here is my use case: Most svgs should be inlined. Therefore, I set the rule as follows:

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

In some cases, I just want the svg url and not embed it. In webpack 1.x, I required them like this: require('path/to/file.svg?external') .

Here's the corresponding rule:

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

Does webpack 2 seem to no longer include a part ? when test ing for the rule, since only the first rule applies to all my svgs after migration.

Is there any way around this? Is there a different strategy for using different sets of downloaders for files of the same extension when require them?

PS: I know that I might need a file like this: require('!file-loader!image-webpack-loader!path/to/file.svg') , but my bootloaders are a bit more complicated than that, and I don’t want to constantly repeat their configuration.

PSS: This does not seem to work (it only applies to the first rule)

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

Answer 1

So I recently visited a conversation on the Juho Vepsäläinen website and found the answer on 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!

Answer 2

resolveLoader.alias will be your solution.

Your configuration will look like this:

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

and use:

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

---

Or, if you want the myLoader1 configurator to be the default and from time to time, use the myLoader2 loaders using this kind of configuration:

 { 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 a similar question here for webpack 1, but the documentation says resolveLoader.alias works the same.

Answer 3

In addition to test you can specify include / exclude conditions. From docs in settings :

 { test: /\.jsx?$/, include: [ path.resolve(__dirname, "app") ], exclude: [ path.resolve(__dirname, "app/demo-files") ] // these are matching conditions, each accepting a regular expression or string // test and include have the same behavior, both must be matched // exclude must not be matched (takes preferrence over test and include) // Best practices: // - Use RegExp only in test and for filename matching // - Use arrays of absolute paths in include and exclude // - Try to avoid exclude and prefer include }