javascript - Webpack 中的 Rule.issuer。它有哪些属性？

Question

Webpack 的 Rule 选项 presents two things (完整语法，而非快捷语法):resource 和 issuer。

In a Rule the properties test, include, exclude and resource are matched with the resource and the property issuer is matched with the issuer.

因此，哪些属性与资源相关就比较清楚了:

{
    resource: {
        test: ...,
        include: ...,
        exclude: ...,
    },
    issuer: { ...boom?? }
}

但是什么属性与issuer匹配呢？发行人什么都没有 in their docs :

A Condition matched with the issuer. See details in Rule conditions.

并且细节不解释发行者。

为什么？他们已经创建了一个选项，但还没有决定它的属性？

Answer 1

They have created an option, but haven't decided on its properties yet?

issuer 的值为 Condition .最常见的 Condition 是具有 test、include 和/或 exclude 属性的对象，您已将其用于资源。您可以用于 resource 的所有内容，也可以用于 issuer。

事实上，Rule.resource期望自己有一个 Condition，摘自文档:

Rule.resource

A Condition matched with the resource. You can either supply a Rule.resource option or use the shortcut options Rule.test, Rule.exclude, and Rule.include.

与 issuer 的唯一区别是有快捷方式(Rule.test、Rule.exclude 和 Rule.include )，因为这是大多数用例。它大致翻译为:

resource: {
  test: Rule.test,
  exclude: Rule.exclude,
  include: Rule.include,
}

And details do not explain issuer.

点击 See details in Rule conditions导致描述，其中甚至包含一个示例。摘录:

Rule Conditions

There are two input values for the conditions:

1. The resource: An absolute path to the file requested. It's already resolved according to the resolve rules.

2. The issuer: An absolute path to the file of the module which requested the resource. It's the location of the import.

Example: When we import "./style.css" from app.js, the resource is /path/to/style.css and the issuer is /path/to/app.js.

这绝对是一个解释，但可能还不够好，所以我会更详细地解释它。

为了说明issuer 的目的，我将使用一个人为的例子，它可能是它的一个用例。假设您有一些 JavaScript 代码，您希望向用户显示这些代码(实际代码)，同时您希望在应用程序的另一部分运行该代码。有问题的代码将是一个简单的问候功能。

greeter.js

export default function greet(name) {
  console.log(`Hello ${name}!`);
}

如果我们想显示 greeter.js 的源代码，我们可以从文件系统中读取它，但是因为我们想在浏览器中运行它，所以这不是一个选项。当我们使用 webpack 时，我们可以使用 raw-loader将 greeter.js 文件作为字符串而不是 JavaScript 导入。假设我们已经配置好它，我们可以创建一个打印源代码的模块。

printer.js

import greetSource from "./greeter";

export default function printSource() {
  console.log(greetSource);
}

在我们的入口点，我们希望同时使用欢迎程序和打印机。

index.js

import greet from "./greeter";
import printSource from "./printer";

greet("World");

printSource();

现在我们有一个问题，因为我们已经为greeter.js配置了raw-loader，因此greet将是一个字符串，不是函数，这将导致运行时错误。我们想要的是将 greeter.js 作为常规 JavaScript 文件导入到 index.js 中，但是我们想将其作为字符串导入到 printer.js。我们可以使用内联加载器定义，但这会相当乏味。

这就是 issuer 的用武之地。无论从 printer.js 导入哪个 JavaScript 文件，都应该通过 raw- loader，以及我们想使用 babel-loader 的任何其他文件。

我们将定义两个 webpack 规则。这两个规则都只针对 JavaScript 文件，因此我们测试 .js 文件结尾，对于导入的每个文件，它都是 resource。我们想知道哪个文件导入了它(导入语句在哪里)，这是 issuer。

printer.js

// Resource: greeter.js, Issuer: printer.js
import greetSource from "./greeter";

index.js

// Resource: greeter.js, Issuer: index.js
import greet from "./greeter";

对于规则，这意味着我们要从 babel-loader 规则中排除 printer.js 作为发行者，而只包含 printer.js 用于 raw-loader 规则。

module: {
  rules: [
    {
      loader: "babel-loader",
      resource: {
        test: /\.js$/
      },
      issuer: {
        exclude: /printer\.js$/
      }
    },
    {
      loader: "raw-loader",
      resource: {
        test: /\.js$/
      },
      issuer: {
        include: /printer\.js$/
      }
    }
  ]
}

注意:没有必要为 raw-loader 规则包含 resource 选项，如果您省略它，它将应用 raw-loader 导入到 printer.js 中的所有内容，这可能是也可能不是您想要的(考虑包含 CSS 来设置输出样式)/p>

捆绑并运行以上代码将产生以下输出:

Hello World!
export default function greet(name) {
  console.log(`Hello ${name}!`);
}