详细解释Webpack加载器的文件加载器

简介

装置

NPM安装-保存-开发文件加载器的使用

默认情况下，生成文件的文件名是文件内容的MD5哈希值，并保留引用资源的原始扩展名。

从“”导入img。/web pack-logo . png ' web pack . config . js

module . exports={ module : { rule s 3360 [{ test :/\。(png|jpg|gif)$/[ext])，将其输出到输出目录并返回公共URL。

/public/path/BD 62c 377 ad 80 f 89061 e a5ad 8829 df 35b . png '当然，如果不想使用默认文件名，我们也可以通过配置options.name选项来设置输出文件名的命名规则。应该注意的是，名称选项支持的类型有：{字符串|函数}:

字符串类型

webpack.config.js

{loader:' file-loader '，options : { name 3360 '[path][name]。[ext]'}}函数类型

webpack.config.js

{loader:' file-loader '，options : { name(file){ if(env==' development '){ return '[path][name]。[ext]“}返回“[hash]”。[ext]'}}在上例中，我们使用了[path]，[name]，[hash]和[ext]占位符，它们对应的含义是：

[ext]:字符串，默认值为file.extname，表示资源扩展名；[name]:字符串，默认值为file.basename，表示资源的基本名称；[路径]:字符串，默认值为file.dirname，表示资源相对于上下文的路径；【哈希】:字符串，默认值为md5，内容的哈希值支持灵活的哈希配置。配置规则为【哈希类型：哈希：摘要类型：长度】，对应描述如下：

其实除了上面常用的四个占位符之外，还有对[N]的支持，其中N是数字类型，表示根据查询参数regExp匹配当前文件名，得到第N个匹配结果。在介绍了名称配置项之后，让我们继续介绍几种常用的配置。

公共配置项目输出路径

OutputPath用于配置自定义输出目录。它支持字符串|函数类型。默认值为“未定义”。用法如下：

webpack.config.js

{loader:' file-loader '，options : { name 3360 '[path][name]。[ext]'，outputPath:' images/'}}需要注意的是，outputPath设置的路径是相对于webpack的输出目录的。

publicPath

publicPath用于配置用户定义的公共发布目录，支持字符串|函数类型。默认值为__webpack_public__path__，用法如下：

webpack.config.js

{ loader: 'file-loader '，options : { name : '[path][name]。[ext]'，public path : ' assets/' } } emit file

EmitFile用于设置是否生成文件。类型为布尔值，默认值为真。但是我们可以通过将emitFile设置为false来禁用这种默认行为。

webpack.config.js

{ loader: '文件加载器'，选项{ emitFile: false } }输出路径vs公共路径

OutputPath只告诉webpack存储结果的位置，而webpack的许多插件都使用publicPath选项来更新生产模式下css和html文件中嵌入的url值。例如：

//Development:服务器和映像都在localhost . image { background-image : URL(')上。/test . png ')；} //Production: Server位于Heroku上，但图像位于cdn . image { background-image : URL(' https://some-cdn/test . png ')；}加载程序标准

编写加载程序时，应遵循以下准则：

易于使用。使用链转移。模块化输出。确保无国籍状态。使用加载器实用程序。记录加载程序依赖关系。解决模块依赖关系。提取通用代码。避免绝对路径。使用对等依赖关系。以上标准按重要性排序，但有些仅适用于某些场景。如果你想了解更多关于自定义加载器的知识，你可以读写一个加载器。接下来，我们将基于上述标准分析文件加载器的源代码。

文件加载器源代码浅析

所谓装货设备只是一个导出为函数对象的Java脚本语言模块装载机转轮会调用这个函数，然后把上一个装货设备产生的结果或者资源文件传入进去。函数的这上下文将由工具填充，并且装载机转轮具有一些有用方法，可以使装货设备改变为异步调用方式，或者获取询问参数。

其实本文介绍的文件加载器并不会对文件的内容进行任何转换，只是复制一份文件内容，并根据相关的配置生成对应的文件名，所生成的文件名一般会带上混杂值，从而避免文件重名导致冲突。接下来我们来简单分析一下文件加载器的部分源码。

导入依赖模块

从"路径"导入路径；从"加载程序-实用程序"导入loaderUtils从"架构实用程序"导入有效选项从""导入架构选项。JSON '；获取配置对象及验证

导出默认函数加载器（内容){ if(！this.emitFile)引发新错误('文件加载器\ n \模块系统需要文件');const options=loaderutils。getoptions(this)| | { }；验证选项（模式、选项、"文件加载器");}以上代码中，emitFile是由装货设备上下文提供的方法，用于输出一个文件，对应的函数签名如下：

emitFile(名称：字符串，内容：缓冲区|字符串，源映射： {.})在调用文件加载器时，如果发现this.emitFile无效，则会抛出异常。接着文件加载器会先调用loaderUtils.getOptions()方法，获取当前装货设备对应的配置对象，然后基于已定义的模式，验证配置对象的有效性。对应的计划定义如下（不包含异常提示信息):

{ 'type': 'object '，' properties': { 'name': {}，' regExp': {}，' context ' : { ' type ' : ' string ' }，' publicPath': {}，' outputPath': {}，' useRelativePath ' : { ' type ' : ' boolean ' }，' emitFile': { '获取语境及生成文件名称

const context=options.context //自定义文件上下文/从webpack 4开始，原先的this.options.context //被改进为这个。rootcontext | |这个。rootcontext | |(这。选项。选项。上下文)；const url=loaderUtils。插值名称(这个，选项. Name，//默认为[哈希]。[ext]' { context，content，regExp: options.regExp，})；loaderUtils中的插值名称方法，用于生成对应的文件名，该方法的签名如下：

插值名称(loaderContext，名称，选项);其中loaderContext为装货设备的上下文对象，名称为文件名称模板，选项为配置对象，支持上下文、内容和正则表达式属性。该方法的使用示例如下：

示例一：

//LoAdercontext。资源路径='/app/js/JavaScript。js '；让插值名称=loaderUtils。插值名称(loaderContext，' js/[hash].脚本[ext]'，{ content : '控制台。日志(' LoadErutils ')' })；//=js/e 353 F4 da 4c 3e 380646 d2b4d 75 c8 a 13 ab。剧本。射流研究…以上示例核心的处理流程如下：

示例二：

//LoadErcontext。资源路径='/app/js/page-home。js ' LoadErutils。插值名称(loaderContext)，'脚本-[1].[ext]'，{ regExp: '第-(。*)\\.js '，内容： '控制台。日志(' LoadErutils ')' })；//=script-home.js处理输出路径

让outputPath=urlif(选项。输出路径){ if(选项类型。输出路径==' function '){输出路径=options。输出路径(URL)；} else {输出路径=路径。POSIX。join(选项。输出路径，网址)；}}处理publicPath

//__webpack_require__ .p=让公共路径=` _ _ _ web pack _ public _ path _ _ $ { JSON。stringify(OutPutPath)} `；if(选项。公共路径){ if(选项类型。公共路径==' function '){公共路径=options。公共路径(URL)；} else if(选项。公共路径。结束开关('/'){公共路径=选项。公共路径URL} else { public path=` $ { options。公共路径}/$ { URL } `；}公共路径=JSON。stringify(公共路径)；}处理emitFile

如果(选项。emit file===undefined | |选项。emit file){//将文件输出到指定的outputPath路径。发出文件(输出路径，内容)；}导出最终路径

return ` module . exports=$ { public path }；`;参考资源

加载器ApiWebpack-令人困惑的部分

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。