webpack 内的 Loader

2021-04-01 16:30:21 阅读：116 来源： 互联网

标签：文件 url babel 代码 loader webpack Loader 加载

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

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

一、编译转换类

如：
css-loader: 解析 css文件
style-loader: 通过一个 JS 脚本创建一个 style 标签，里面包含一些样式。

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

二、文件操作类

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

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

file Loader
还可以通过 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 模块加载方式：

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

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

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

标签：文件,url,babel,代码,loader,webpack,Loader,加载
来源： https://blog.csdn.net/sinat_22480443/article/details/115368817

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9