在应用程序的入口点（webpack）直接导入file-loader。感叹号是什么？

Question

我正在使用一个React模板，目前有一行代码让我非常困惑，原因有很多。

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

1. 首先，为什么在入口点应用程序文件中需要使用file-loader？

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

3. 感叹号代表什么意思？

- Michael Du

Answer 1

这是一个 Webpack loader 的示例（在本例中为 file-loader），它被 内联使用。

当 Webpack loader 被内联使用时，而不是通过 Webpack 配置文件的 module.rules 数组中的对象使用，要使用的 loader 名称将被添加到要 require（或 import）的文件名称前面，用 ! 分隔。要传递给 loader 的任何选项都会作为查询字符串或 JSON 字符串指定在 loader 名称后面，用 ? 分隔 loader 名称和 loader 选项。

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

所有这些都是与Webpack有关的 - 如果您尝试在没有通过Webpack处理的Node.js中运行此代码，几乎肯定会出现错误。

- user1009387