webpack-query-loader

 

Run loaders depending on the query string.

If you're trying to use resourceQuery in webpack v4 you're in the right place. If you're using webpack v5, consider using the built in resourceQuery instead of this loader

This loader is an attempt to solve problems like this issue.

Install

Install with npm:

``bash
npm install webpack-query-loader --save-dev
`

Install with yarn:

`bash
yarn add webpack-query-loader --dev
`

Usage

All query parameters (i.e. ?value=2) will also be passed down to the loader in use.loader.

`javascript
import png from "./some_pic.png?inline";
`

#### webpack.config.js

`javascript
module.exports = {
...
module: {
rules: [
{
test: /\.(png|jpe?g|svg)/i,
use: [
{
loader: "webpack-query-loader",
options: {
resourceQuery: "inline",
use: {
loader: "url-loader",
}
},
},
{
loader: "webpack-query-loader",
options: {
resourceQuery: "!inline",
use: {
loader: "file-loader",
}
},
},
],
},
],
},
};

`

Options

| Name | Type | Default | Description |
| :-----------------------------------: | :--------------------------: | :-------: | :--------------------------------------------------: |
| use | string\|object | undefined | The loader to use |
| resourceQuery | string\|string[]\|function | undefined | The conditions that must match for the loader to run |

$3

The use option can be in one of these formats

`
use: "loader-name"
`

or

`
use: {
loader: "loader-name",
options: {
someOption: true,
}
}
`

or

`
use: {
loader: "loader-name"
}
`

$3

The resourceQuery option can be in one of these formats

`
resourceQuery: "run-me" // only run the loader in use if the import has query parameter run-me
`

or

`
resourceQuery: "!run-me" // only run the loader in use if the import DOES NOT have query parameter run-me
`

or

`
resourceQuery: ["run-me", "!dont-run-me"] // only run the loader in use if the import has query parameter run-me AND no query parameter dont-run-me. For example "./some_pic.png?run-me" would work but "./some_pic.png?run-me&dont-run-me" would not.
`

or

`
// resource is the whole import string e.g "./some_pic.png?run-me"
// resourceQuery is the whole query string e.g "?run-me"
// query is an object of the broken down query string e.g "{ run-me: null }"
// query is empty (e.g. {}) if no query string exist in the import statement
// returns true to run the loader, false to skip
(resource, resourceQuery, query) => {
...
return true;
}
`

#### Notes:

For example, this query string ?height=10&width=10&resize has query parameters height, width, and resize`

An import statement without a query string is considered not to have any query parameter