前言
浏览器只能识别css代码,所以less代码在进行打包之前,需要通过一系列loader转换,才能使得打包出浏览器可以识别的bundle。
less-loader(less => css)
less-loader函数接受less代码作为入参,然后通过less.js将less代码转换成css代码,最后将css代码输出给css-loader。
css-loader(css => 可执行的js代码字符串)
css-loader函数接受css代码作为入参,然后解析其中的@import,url语法,最后导出一个可以被执行的js代码字符串。该js字符串被执行之后,会声明一个数组,并且将转换好的css代码字符串push到数组当中,最后通过module.exports对象导出该数组。
style-loader(模块路径 => 可执行的代码字符串)
style-loader函数入参是一个模块路径,根据配置导出一个js代码字符串,该代码最终会插入到bundle.js当中。该字符串的执行逻辑是:根据模块路径获取到之前css-loader导出的数组,并且引入自己的api模块。将css-loader导出的数组中保存的css代码作为入参,调用api模块,api模块根据输入以及配置,将css代码以link或者style标签的形式插入dom树中。