webwork-query-loader v1.0.0

webwork-query-loader

Run loaders depending on the query.

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:

npm install --save-dev webwork-query-loader

Install with yarn:

yarn add webwork-query-loader --dev

Usage

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

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

Options

use

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"
}

resourceQuery

The resourceQuery option can be in one of these formats

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

or

resourceQuery: ["run-me", "!dont-run-me"] // only run the loader in `use` if the import has query `?run-me` AND no query `!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 }"
// returns true to run the loader, false to skip
(resource, resourceQuery, query) => {
  ...
  return true;
}