webpack-loader学习

loader

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。

loader本质上一个函数，其作用是将你模块中的代码字符串经过一系列处理转换为另一种代码字符串然后将其返回。其工作地方在编译过程的读取到你文件的内容之后，转成抽象语法树之前（对编译过程不太了解的可以看看上篇博客）。

loader在编译过程中所处位置的图示：

loader的处理流程：

loader配置
在webpack.config.js中，module对象中：

rules:数组中存的是一个对象，它里面也可以是多个对象，一个对象对应一种规则，如果你当前模块满足这个规则，那么它就会用其对应的加载器loader来对你的模块代码进行处理，并返回经过处理后的字符串代码，随后进行语法分析，转成抽象语法树等一系列操作。

规则对象：里面的test是规则，一个正则表达式，它用来匹配你模块中的哪些文件需要进行处理，比如上述就是对你的以.png/jpg/gif结尾的文件进行处理，use： 使用哪些加载器，以及加载器的路径。

use也是一个数组，数组中存的是你加载器对象，因为一个文件可能使用多个加载器来进行处理。

下面是对图片进行base64格式的编码练习：

loader加载器：

配置文件（其他的使用默认配置）：

入口文件：

最后利用webpack打包在dist目录下生成main.js，新建一个Index.html，引入main.js，图片就会在浏览器端显示：

总结：loader本质是一个函数，它工作在你读取到模块内容之后，转换成AST之前，将你的模块字符串代码通过一系列的规则匹配，如果匹配到了，使用哪些加载器对字符串代码进行转换，最后将转换后的代码转换成AST，进入到下一步编译流程。