Run loaders depending on their query
npm install 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 with npm:
``bash`
npm install webpack-query-loader --save-dev
Install with yarn:
`bash`
yarn add webpack-query-loader --dev
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",
}
},
},
],
},
],
},
};
`
| 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 |
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"
}
The resourceQuery option can be in one of these formats
`use
resourceQuery: "run-me" // only run the loader in if the import has query parameter run-me`
or
`use
resourceQuery: "!run-me" // only run the loader in if the import DOES NOT have query parameter run-me`
or
`use
resourceQuery: ["run-me", "!dont-run-me"] // only run the loader in 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