直接在应用程序（webpack）的入口点导入文件加载器。感叹号是啥？

Posted 2023-02-22

【中文标题】直接在应用程序（webpack）的入口点导入文件加载器。感叹号是啥？

【英文标题】：Importing file-loader directly in entry point of app (webpack). What is the exclamation point?直接在应用程序（webpack）的入口点导入文件加载器。感叹号是什么？

【发布时间】：2018-10-23 16:48:24

【问题描述】：

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

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

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

name=[name] 参数在做什么？

感叹号是什么意思？

【参考方案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 配置文件中设置，则以公共路径为前缀）。

所有这些都是特定于 Webpack 的——如果你试图在 Node.js 中运行这段代码而不通过 Webpack，你几乎肯定会得到一个错误。