Question

我正试图了解style-loader的工作方式？ style-loader的源代码中有一个code fragment关于热模块更换的信息。

var hmr = [
    // Hot Module Replacement,
    "if(module.hot) {",
    // When the styles change, update the <style> tags
    "   module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
    "       var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
    "",
    ...
]

我的问题是关于代码中的!!。什么意思？以及webpack如何处理呢？我已经检查过webpack文档，但没有找到任何解释。

当参数request为

时，我调试代码

"/Users/leon/Documents/localCode/style-loader-test/node_modules/_css-loader@1.0.1@css-loader/index.js!/Users/leon/Documents/localCode/style-loader-test/index.css"

，

loaderUtils.stringifyRequest(this, "!!" + request)

返回：

"!!./node_modules/_css-loader@1.0.1@css-loader/index.js!./index.css"

loaderUtils.stringifyRequest用于对绝对路径进行条带化，因此结果易于理解。

然后，webpack进一步解析代码。最后，在输出代码中生成以下代码：

module.hot.accept(/*! !./node_modules/_css-loader@1.0.1@css-loader!./index.css */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./index.css", function() {
    var newContent = __webpack_require__(/*! !./node_modules/_css-loader@1.0.1@css-loader!./index.css */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./index.css");
    ...
}

!!在输出代码中消失了，但是我不知道会发生什么，!!的含义是什么？任何人都可以帮助解释吗？

双重是什么意思！在样式加载器源代码中？

0 个答案: