node.js - 直接在应用程序(webpack)的入口点导入文件加载器。感叹号是什么？

Question

我正在使用 React 模板，由于多种原因，我目前对这一行感到非常困惑。

require('file-loader?name=[name].[ext]!./index.html');

1. 首先，为什么入口点应用文件中需要文件加载器？

2. name=[name] 参数的作用是什么？

3. 感叹号是什么意思？

Answer 1

这是一个 Webpack 加载器(在本例中为 file-loader)的示例 used inline .

当 Webpack 加载器内联使用时，而不是通过 Webpack 配置文件的 module.rules 数组中的对象使用时，要使用的加载器的名称会添加到您想要要求(或导入)的文件的名称前面，并以 ! 分隔。任何要传递给加载器的选项都在加载器名称之后指定为查询字符串或 JSON 字符串，并使用 ? 分隔加载器名称和加载器选项。

鉴于file-loader将文件复制到 Webpack 输出目录并返回其 URL，require("file-loader?name=[name].[ext]!./index.html") 将 ./index.html 复制到输出目录及其原始名称和扩展名。如果调用 require 的结果被分配给任何变量，在这种情况下它将返回 /index.html (如果在 Webpack 配置文件中设置，则以公共(public)路径为前缀)。

所有这些都是 Webpack 特定的 - 如果您尝试在 Node.js 中运行此代码而不通过 Webpack，您几乎肯定会收到错误。