require/import路徑中的歎號是什麼？

問題：

之前在一些開源項目的源碼裏，以及一些文章裏，見到如下這樣的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';

 

 答案：

這是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));

 

原文：https://segmentfault.com/q/1010000023671863