Webpack 4中file-loader前的"!!"作用是什么？

在Webpack里，!!是loader的特殊前缀语法，作用是强制禁用所有已配置的loader规则（包括全局配置的preLoader、普通loader、postLoader），只使用紧跟在它后面的指定loader处理目标文件。

拿你给出的代码举例：

const styles = require('!!file-loader!./styles.css');

假设你在webpack.config.js里已经给.css文件配置了比如style-loader+css-loader的处理链，但这条require语句会完全忽略这些全局配置，只让file-loader来处理styles.css，把它作为资源文件输出，而不是像全局配置那样注入到页面中。

类似的loader前缀还有几种，作用各有区别：

• !：跳过普通loader，保留preLoader和postLoader
• -!：跳过preLoader和普通loader，只保留postLoader
• !!：跳过所有类型的loader，仅使用指定的单个loader

这种语法适合在需要临时覆盖全局loader配置的场景下使用，针对单个文件做特殊处理。

内容的提问来源于stack exchange，提问作者cusejuice