webpack 内的 Loader

前言：Loader 是 实现 webpack 实现整个前端模块化的核心 。用于对模块的源代码进行转换。俗称加载器，去处理和加工打包过程当中遇到的资源文件。

编译转换类：会把加载到的资源模块转换为 JavaScript 代码。
文件操作类：会把加载到的资源模块拷贝到输出的目录，同时将这个文件访问路径向外导出。
代码检查类：对我们所加载到的资源文件（一般是 代码）去进行校验的加载器。这类加载器是去统一我们代码的风格，从而提高代码质量，一般不会去修改生产环境的代码。

一、编译转换类

样式文件的解析

css-loader: 解析 css文件
style-loader: 通过一个 JS 脚本创建一个 style 标签，里面包含一些样式。
通常两个 loader 组合使用。

传统的方式将 执行 文件和 样式 文件 分开单独维护，单独去引入。
webpack 建议我们在 js 文件 去载入 css 文件。它不仅仅是建议我们引入 css 文件，而是在我们编写代码过程当中去引入当前代码所需要的任何文件。需要资源的不是应用，而是此时的代码，想要代码正常工作，就必须加载对应的资源。

html 文件的解析

html-loader:将 HTML 导出为字符串。当编译器需要时，将压缩 HTML 字符串。

二、文件操作类

如：
file-loader:帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片.

工作过程：webpack在打包时遇到了 图片文件，然后根据配置文件 匹配到对应的文件加载器，先将导入的文件拷贝到输出的目录，并且随机生成一个hash值，当做图片的名字。并将打包后的图片名称返回给require函数。对于我们的应用来说，所需要的资源就被发布出来了，然后通过模块的导出成员，拿到这个资源的返回路径。

还可以通过 Data URLs 可以以代码的形式表示任何类型的文件了。 需要通过 url-loader 加载器 实现。

Data URLs: 是一种特殊的 url 协议，可以用来直接表示一个文件，传统的url 一般要求服务器上有一个对应的文件，通过请求这个地址得到服务器上的这个文件。
Data URLs 是一种 当前 url 就可以直接表示文件的方式。这种 url 当中的文本就已经包含了文件的内容，在使用这种url 的时候，就不会发送任何的 http 的请求。

小结：

• Data URLs ：适合项目中的小文件，可以减少我们的应用发送请求的次数。
• file-loader：对于较大的文件，通过传统的 file-loader的方式以单个文件去存放，提高我们应用的加载速度。

建议：

• 超过 10KB 文件单独提取存放；小于 10KB 文件转换为 Data URLs 嵌入代码中。
• 配置方法如下（配置文件中只指定了 url-loader,但是项目中必须安装 file-loader。它对于超出 的文件 会调用 file-loader 这个模块）：

use: {
	loader : 'url-loader',
	options: {
		limit: 10 * 1024  // 10KB
	}
}

三、代码检查类

Webpack 仅仅是对模块去完成打包工作，所以才会对 import和 export 去进行 转换。并不会去转换其他的ES6+ 特性。

babel-loader

处理代码中的 ES6+新特性。
babel 严格意义上来说只是一个转换 js 代码的一个平台。我们需要去基于 babel 这样一个平台通过不同的插件，来去转换代码当中的一些特性。

babel-loader 需要额外依赖babel 的核心模块，@babel/core @babel/preset-env。

// 安装 babel-loader
npm i babel-loader @babel/core @babel/preset-env -D

// 配置
{
	test: /.js$/,
	use: {
		loader: 'babel-loader',
		options: {
	// preset-env 这个插件包含了全部的 ES6+ 新特性
			presets:['@babel/preset-env']
		}
	}
}

四、总结：

Webpack 模块加载方式：

1. 遵循 ES Modules 标准的 import 声明
2. 遵循 CommonJS 标准的 require 函数
3. 遵循 AMD 标准的 define 函数和 require 函数
4. 样式代码中的 @import 指令和url 函数
5. HTML 代码中图片标签的 src 属性

建议：Webpack 兼容多种模块化标准，除非必要的情况，否则一定不要在项目当中混合使用多种模块化标准。混着用，会大大降低项目的可维护性。
---------------------------------------------------
部分 loader 加载的资源中一些用法也会触发资源模块加载。
如若需要其他标签的一些属性也能触发打包的话，需要添加配置。配置如下：

{
	test: /.html$/,
	use: {
		loader: 'html-loader',
		options:{
			// 默认只有 img:src
			attrs:['img:src','a:href']
		}
	}
}