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

Question

Webpack的Rule选项提供两件事(完整的,而不是快捷语法):resource和issuer.

在Rule属性test中include,exclude和resource,与资源issuer匹配,属性与发行者匹配.

因此,有些清楚哪些属性与a相关resource:

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

但是什么属性与issuer？相匹配？发行人在他们的文档中没有任何内容:

一个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.

单击条件中的详细信息Rule将导致描述,其中甚至包含一个示例.摘抄:

规则条件

条件有两个输入值:

1. 资源:请求的文件的绝对路径.它已根据解决规则解决.

2. 颁发者:请求资源的模块文件的绝对路径.这是导入的位置.

示例:当我们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时,我们可以使用它将文件作为字符串而不是JavaScript raw-loader导入greeter.js.假设我们已经配置了它,我们可以创建一个打印源代码的模块.

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进来的地方.无论从 哪个JavaScript文件导入,printer.js都应该通过raw-loader我们想要使用的任何其他文件传递babel-loader.

我们将定义两个webpack规则.这两个规则都只针对JavaScript文件,所以我们测试.js文件的结尾,对于每个导入的文件,就是这样resource.我们想知道导入它的哪个文件(import语句所在的位置),这是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}!`);
}