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函数。对于我们的应用来说,所需要的资源就被发布出来了,然后通过模块的导出成员,拿到这个资源的返回路径。

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

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

小结
  • 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']
		}
	}
}
上一篇:javascript – 如何使用Nunjucks或Node.JS对JSON数据进行分组并按月计算


下一篇:[转]smtplib.SMTPDataError: (554, b'DT:SPM的异常