直接在app（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配置文件中设置，则以公共路径作为前缀）。

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