Question

Webpack的Rule选项presents two things（完整而非快捷语法）：resource和issuer。

在Rule个属性test中，include，exclude和resource与资源和属性相匹配issuer与发布商匹配。

因此，有些属性与resource：

有关

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

但是哪些属性与issuer匹配？发行人in their docs没有任何内容：

与发卡行匹配的Condition。请参阅规则条件中的详细信息。

详细信息不解释issuer。

为什么呢？他们已经创建了一个选项，但尚未确定其属性？

Answer 1

他们已经创建了一个选项，但尚未决定其属性吗？

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

事实上，Rule.resource期望自己为Condition，摘自文档：

Rule.resource

与资源匹配的Condition。您可以提供Rule.resource选项，也可以使用快捷方式选项Rule.test，Rule.exclude和Rule.include。

与issuer的唯一区别在于有快捷方式（Rule.test，Rule.exclude和Rule.include），因为这是大多数用途 - 案例。它大致翻译为：

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

细节不解释issuer。

点击See details in Rule conditions会显示一个描述，其中甚至包含一个示例。摘录：

规则条件

条件有两个输入值：



资源：请求文件的绝对路径。它已经根据解决规则解决了。



颁发者：请求资源的模块文件的绝对路径。它是导入的位置。


示例：当我们import "./style.css" app.js时，资源为/path/to/style.css且发布者为/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);
}

在我们的切入点，我们希望同时使用greeter和打印机。

<强> index.js

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

greet("World");

printSource();

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

这就是issuer的用武之地。从 printer.js导入的任何JavaScript文件都应该通过raw-loader传递，并从任何其他文件传递到我们＆＃ 39;我想使用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";

对于规则，这意味着我们希望从printer.js规则中排除babel-loader作为发布者，并且仅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$/ } } ] }

注意：没有必要为resource规则添加raw-loader选项，如果您将其删除，则会将raw-loader应用于所有内容正在printer.js中导入的内容，可能是您想要的，也可能不是（想想包含CSS来设置输出样式）

捆绑并运行上面的代码将产生以下输出：

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

Webpack中的Rule.issuer。属于哪些属性？

1 个答案: