1 课程内容概括

本笔记对应的课程部分介绍了Webpack Loader。

2 概述

Webpack只能识别JS，因此要让其能够处理非标准JS资源，需要由资源翻译模块来将资源翻译为标准JS，Loader就可以起到这个作用。

1.安装Loader

2.添加module处理CSS文件

Webpack Loader链式调用是指在Webpack中使用多个 Loader 对模块进行处理时，通过一系列的Loader链式调用来按顺序处理模块。

在Webpack的配置文件中，可以通过在module.rules属性中配置Loader来处理模块。当需要使用多个Loader时，可以使用链式调用的方式按顺序应用它们。

可以使用多个Loader对模块进行处理，并按顺序依次应用它们。这样可以实现更复杂的模块处理逻辑，从而满足不同的开发需求。

Webpack中Loader默认是同步执行的，即一个Loader执行完成后才会执行下一个 Loader。但是有时候，一些Loader可能需要执行读取文件、发送网络请求等异步操作在这种情况下，需要使用异步Loader来确保异步操作能够正确执行。

异步 Loader 可以通过两种方式来实现： 1.使用callback 2.返回 Promise

使用异步Loader时，需要确保异步操作能够正确执行，并且处理结果能够正确返回给 Webpack。否则，可能会导致一些预料外的问题。

Webpack中Loader有两种模式：pitch 和 normal。

这两个模式的执行顺序是先执行 pitch，再执行 normal。

在执行 pitch 阶段，Webpack 会从下往上遍历Loader，直到遇到一个Loader的 pitch 方法返回了一个字符串或者undefined，然后再从上往下遍历Loader，执行各个 Loader的 normal 方法。这样可以实现对Loader的优先级控制。

babel-loader：将ES6+代码转换为ES5代码，以便在不支持ES6+的浏览器中运行。

css-loader：处理CSS文件，将CSS代码转换为JavaScript代码，并将其注入到页面中。

style-loader：将CSS代码注入到HTML页面中的标签中，以便浏览器能够解析和渲染页面样式。

file-loader：处理文件，将文件复制到输出目录，并返回文件的URL地址。

url-loader：与file-loader类似，但是可以将文件转换为base64编码的URL，以减少网络请求次数，提高页面加载速度。

html-loader：处理HTML文件，将HTML代码转换为JavaScript代码，并将其注入到页面中。

image-loader：处理图片文件，将图片压缩、优化，并将其注入到JavaScript代码中，以便浏览器能够解析和渲染图片。

json-loader：处理JSON文件，将JSON代码转换为JavaScript代码，并将其注入到页面中。

raw-loader：将文件的原始内容作为字符串导入，没有进行任何处理。

本笔记对应的课程内容详细介绍了Webpack Loader。