What does -! mean in webpack loader string?

Question

I've seen some loader queries like require('-!some-loader!file.ext') but haven't been able to find any reference to -! in the docs. I've also seen a few that start with !!. What do they mean and where are they documented?

Answer 1

Inline loaders like require('some-loader!file.ext') and ! type prefixes should not be used as they are non-standard.

However, they may be used by loader generated code.

---

In short, there are three types of these prefixes. They are used to override the default loader order configuration to suit special cases when requiring or importing certain files.

Say you don't want the loaders that are present in your config file to evaluate a certain file, then you could use a single ! before the loader. Note that the ! is also used for separating loaders.

If by chance you have configured pre loaders and/or post loaders, you could disable these by prefixing with !! to disable all loaders, or -! to disable everything but postloaders.

Pre and post loaders, as their names suggest, define the order in which the loaders are used. Define these in your config file by using enforce: "pre" or enforce: "post".

Again, but quoted from the webpack docs:

• Prefixing with ! will disable all configured normal loaders

import Styles from '!style-loader!css-loader?modules!./styles.css';

• Prefixing with !! will disable all configured loaders (preLoaders, loaders, postLoaders)

import Styles from '!!style-loader!css-loader?modules!./styles.css';

• Prefixing with -! will disable all configured preLoaders and loaders but not postLoaders

import Styles from '-!style-loader!css-loader?modules!./styles.css';