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

Webpack的Rule选项presents two things（完整而不是快捷语法）：resource和issuer。Webpack中的Rule.issuer。属于哪个属性？

在Rule属性test，include，exclude和resource与资源和属性匹配issuer与发行者匹配。

所以，它是有点不清楚什么性质与一个resource：

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

但什么属性与issuer匹配？发行人in their docs：

A Condition与发行人相匹配。在规则条件中查看详情。

和详细信息不解释issuer。

为什么？他们创造了一个选择，但尚未决定其属性？

来源

2017-10-16 Green

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

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); 
}

在我们的切入点，我们要使用的迎宾员和打印机在同一时间。

index.js

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

greet("World"); 

printSource();

现在我们有一个问题，因为我们已经配置raw-loader为greeter.js，因此greet将是一个字符串，而不是一个功能，这将导致运行时错误。我们想要的是将index.js中的greeter.js作为常规JavaScript文件导入，但我们想要将它作为字符串在printer.js中导入。我们可以使用内联装载器定义，但这会很枯燥。

这是issuer进来。无论JavaScript文件导入从printer.js应通过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";

对于规则，这意味着我们要排除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$/ } } ] }

注：这是没有必要以包括raw-loader规则resource选项，如果你离开它，它会应用raw-loader到在printer.js正在进口的一切，这可能是也可能不是什么你想（认为包括CSS样式输出）

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

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

来源

2017-10-16 11:14:35

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

回答

相关问题