Webpack常用资源加载器

资源加载器

开源社区提供了非常多的资源加载器，下面我们介绍一些常用的资源加载器

文件资源加载器

大多数loader都是类似css加载器一样，通过将代码引入到js文件中进行加载，但是有些文件例如图片

或者字体是无法通过js的方式去表示的，对于这类的文件需要文件资源加载器，就是fileLoader。

根据loader的思想，在用到的地方通过引入的方法导入文件，然后让文件进行加载。

import createHeading from './heading.js'
import './main.css'
import icon from './icon.png'//这里就是我们需要导入的图片

const heaidng = createHeading()
document.body.append(heading)

//引入图片
const img = new Image()
img.src = icon
document.body.append(img)

因为我们在开头导入了webpack无法识别的图片，需要我们额外安装一个fileloader：

yarn add file-loader --dev

安装后需要在配置文件里面添加加载规则：

module:{
    rules:[
        {
            test:/.png$/,
            use:'file-loader'
        }
    ]
}

之后通过yarn webpack进行打包

这个时候会发现在dist目录下生成一个打包后的图片。

打包流程

文件夹在其将需要打包文件拷贝到输出目录，将文件拷入输出目录后的路径作为当前这个模块的返回值返回，那么对于应用来说这个资源就被发布出来了，同时我们可以通过模块导入成员拿到这个路径。

webpack URL加载器

Data URLs 是一种特殊的url协议，用于直接表示一个文件，传统的url需要服务器上有对应的文件，然后前端通过请求这个地址访问到文件。而Data URLs是直接用url去表示文件的方式。

<!--协议丨媒 体 类 型 和 编 码 类 型丨文件内容-->
	data:[<mediatype>][;base64],<data>
<!--例如-->
    data:text/html;chraset=UTF-8,<h1>html content</h1>

当我们使用这种方式的时候，就不需要发送任何的html请求。

如果是png或者字体这种无法通过二进制表示的文件时，可以通过base64进行编码过后的字符串来表示相关内容。

data:image/png;base,IVmslAIENALgia9...SuQmCC

这个时候需要url-loader进行相关代码打包

yarn add url-loader --dev

相应的需要在配置文件中进行相关配置。

module:{
    rules:[
        {
            test:/.png$/,
            use:'url-loader'
        }
    ]
}

这种方式这个文件就不会出现在dist目录当中。

**小文件使用Data URLs，减少请求次数 **

大文件单独提取存储，提高加载速度

这个时候我们可以在配置文件中添加相关的配置限制即可

同时别忘记安装file-loader

module:{
    rules:[
        {
            test:/.png$/,
            use:{
                loader:'url-loader',
                options:{
                    limit:10*1024	//10kb
                }
            }
        }
    ]
}

webpack常用加载器分类

• 编译转换类
  • 通过将加载到的资源模块转换为js代码，例如css-loader将css转换成了js模块
• 文件操作类
  • 通过将加载到的资源模块拷贝到输出目录，同时将这个文件的访问路径向外导出
• 代码检查类
  • 对加载到的资源文件，进行校验的加载器，目的时通过校验代码来将代码进行统一，提高代码质量。