require/import路径中的叹号是什么？

Question

之前在一些开源项目的源码里，以及一些文章里，见到如下这样的require/import路径，其中包含形如!.的片段，不知道是什么意思：

// https://juejin.im/post/6844903504352378894#heading-10
require("any-template-language-loader!./xyz.atl");
var html = anyTemplateLanguage.render("xyz");

// vscode源码 -- src/vs/base/browser/ui/actionbar/actionbar.ts
import 'vs/css!./actionbar';

Answer 1

自己找到答案了。这是webpack的语法，用于激活loader的。

在webpack - loaders下有一句话：

Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration

意思就是，可以通过loadername!的方式调用loader，也可以通过配置文件内的正则规则自动启用。

因此，对于问题中的两个例子，

require("any-template-language-loader!./xyz.atl");

表示使用any-template-language-loader来加载./xyz.atl这个文件。

vscode同理，

import 'vs/css!./actionbar';

表示使用vs/css来加载./actionbar.css这个文件。

而vs/css这个loader是在src/vs/css.build.js这个文件中注册的：

// vscode - src/vs/css.build.js:360
define('vs/css', new CSSPlugin(cssLoader));