直接在应用程序 (webpack) 的入口点导入文件加载器。感叹号是什么?
Importing file-loader directly in entry point of app (webpack). What is the exclamation point?
我正在使用 React 模板,由于多种原因,我目前对这一行感到非常困惑。
require('file-loader?name=[name].[ext]!./index.html');
- 首先,为什么入口点应用程序文件中需要文件加载器?
name=[name]
参数在做什么?
感叹号是什么意思?
这是一个 Webpack 加载程序的示例(在本例中 file-loader
)是 used inline。
当内联使用 Webpack 加载器时,而不是通过 Webpack 配置文件的 module.rules
数组中的对象,要使用的加载器的名称会添加到您想要加载的文件的名称前面(或导入),由 !
分隔。要传递给加载程序的任何选项都在加载程序名称之后指定为查询字符串或 JSON 字符串,并使用 ?
分隔加载程序名称和加载程序选项。
鉴于 file-loader
将文件复制到您的 Webpack 输出目录,并且 return 其 URL,require("file-loader?name=[name].[ext]!./index.html")
将 ./index.html
复制到输出目录它的原始名称和扩展名。如果调用 require
的结果被分配给任何变量,在这种情况下它将 return /index.html
(如果在 Webpack 配置文件中设置,则以 public 路径为前缀)。
所有这些都是特定于 Webpack 的 - 如果您尝试 运行 Node.js 中的这段代码而不将其放入 Webpack,您几乎肯定会遇到错误。
我正在使用 React 模板,由于多种原因,我目前对这一行感到非常困惑。
require('file-loader?name=[name].[ext]!./index.html');
- 首先,为什么入口点应用程序文件中需要文件加载器?
name=[name]
参数在做什么?感叹号是什么意思?
这是一个 Webpack 加载程序的示例(在本例中 file-loader
)是 used inline。
当内联使用 Webpack 加载器时,而不是通过 Webpack 配置文件的 module.rules
数组中的对象,要使用的加载器的名称会添加到您想要加载的文件的名称前面(或导入),由 !
分隔。要传递给加载程序的任何选项都在加载程序名称之后指定为查询字符串或 JSON 字符串,并使用 ?
分隔加载程序名称和加载程序选项。
鉴于 file-loader
将文件复制到您的 Webpack 输出目录,并且 return 其 URL,require("file-loader?name=[name].[ext]!./index.html")
将 ./index.html
复制到输出目录它的原始名称和扩展名。如果调用 require
的结果被分配给任何变量,在这种情况下它将 return /index.html
(如果在 Webpack 配置文件中设置,则以 public 路径为前缀)。
所有这些都是特定于 Webpack 的 - 如果您尝试 运行 Node.js 中的这段代码而不将其放入 Webpack,您几乎肯定会遇到错误。