共 4 篇文章

从零搭建一个 webpack 脚手架工具（四）

loader 原理与实现

loader 的执行顺序

loader 的执行顺序是：从右到左、从下到上。在配置 sass 样式时，需要这么去写 loader：

{
    test: /\.sass$/,
    use: ['style-loader','css-loader','sass-loader']
}

loader 会先执行 sass-loader，让 sass 格式的样式转成 css 格式，然后使用 css-loader 处理样式中引入的图片路径，最后使用 style-loader 将样式插入到 style 标签中。因此是 “从右到左” 执行。再看下面的配置：

[
    {
        test: /\.js$/,
        use: 'babel-loader'
    },{
        test: /\.js$/,
        use: 'eslint-loader'
    }
]

eslint-loader 放在最后，就是先执行 eslint-loader，检验代码书写规则，然后再执行别的 js loader，所以是 “从下到上” 执行。

loader 的类型

expose-loader

expose-loader 可以将局部变量暴露到 window 上。比如当我们使用 jQuery 时，可以这样引入：import $ from jquery。但是当获取 window.$ 时必不能获得 jQuery 对象。这是因为 webpack 做了处理没让 jquery 变量暴露给 window。如果想让改变量暴露出来，就可以使用 expose-loader。用法是将 import 语法修改成下面的样子：

import $ from "expose-loader?$!jquery";

上面的代码中，expose-loader 就是指使用的该模块，而 ? 和 ! 是固定格式，它们之间的 $ 表示要暴露给 window 的变量。这样，jQuery 对象就暴露给了全局。

当然也可以在 webpack 中进行配置：

{
    rules: [
        {
            // 当引用了 jquery 模块时就使用 expose-loader
            test: require.resolve('jquery'),
            use: 'expose-loader?$'
        }
    ]
}

但是使用上面的配置之后，还是要使用 import $ from "jquery"; 方式去引入模块。如果不想每次重复去写这一句代码。可以使用 webpack 自带的一个插件：ProvidePlugin。使用了这个插件之后，也不用再每次都引入。配置如下：

const webpack from 'webpack';

{
    plugins: [
        new webpack.ProvidePlugin({
            // 在每个模块中注入 $ 变量
            $: 'jquery'
        })
    ]
}

expose-loader 的配置与别的 loader 有些不同，expose-loader 可以用在 import 语句中。这种 loader 称为内联（inline）loader。

前面已经介绍过，webpack loader 的配置项中，有一个 enforce 配置项可以指定 loader 的执行顺序。

rules: [
    {
        test: /\.js$/,
        use: 'loader1',
        // pre 表示这个 loader 在前面先执行
        enforce: 'pre'
    }
]

enforce 有三个取值：

pre：这个 loader 在前面先执行；
post：这个 loader 在后面执行；
normal：在中间执行（pre 之后，post 之前，normal 是默认的值）

除了这三种 loader 还有一个就是行内 loader（inline）。这四种 loader 的执行顺序是这样的：先执行 pre；在执行 normal；然后执行 inline；最后执行 post。

行内 loader 比较特殊，不能使用 enforce 进行配置。需要在引入文件时进行配置，比如使用行内 loader 处理 a.js 文件的执行，需要这么来写：

// inline-loader-name 就是行内 loader 的名字
// ! 感叹后右边是文件路径
// 当然，import 方式的书写方式与 require 一样
const a = require("inline-loader-name!./a.js");

如果你使用了 inline-loader，又不希望前置 loader 和 normal loader 再去执行，可以使用 -! 的方式禁止：

const a = require("-!inline-loader-name!./a.js");

当前面只加了 ! 时表示 normal loader 不会再执行（const a = require("!inline-loader-name!./a.js");）；前面有两个 !! 时表示只有 inline-loader 会执行，别的 loader 都不会再执行。

loader 的组成

loader 默认有两部分组成：pitch 和 normal。

pitch无返回值的loader

loader 会先执行 pitch，然后获取资源再执行 normal loader。如果 pitch 有返回值时，就不会走之后的 loader，并将返回值返回给之前的 loader。

pitch有返回值的loader

loader 其实就是一个函数，函数的参数是处理文件的文件内容，参数类型是字符串。这个函数还有一个 pitch 方法，同样也有一个参数，是字符串形式的剩余参数，这个剩余参数中有当前 loader 之后还没有执行的 loader 的所在的绝对路径。

因此 webpack 的配置文件中的 use: [loader3,loader2,loader1] 的执行顺序是这样的：假如三个 loader 的 pitch 函数都没有返回值（或者说没写 loader.pitch 函数，没有返回值的 pitch 函数是没有用的，当写 pitch 函数时就应考虑返回什么），那么就直接获取资源，然后走下面的 normal 部分。如果 loader2 的 pitch 有返回值，则 pitch 的 loader1 和 normal 的 loader1、loader2 就不会执行，而是执行 normal 的 loader3 函数。

loader 的特点

第一个 loader 要返回 js 脚本（字符串格式的脚本，这里的第一个 loader 指的是数组的最左边的那个 loader）
每个 loader 只做一件事，为了使 loader 在更多的场景中链式调用；
每一个 loader 都是一个模块；
每个 loader 都是无状态的，确保 loader 在不同的模块转换之间保存状态。

var loader = function(source){
    console.log(source);
}
loader.pitch = function(remainingRequest){
    return ;
}

实现 babel-loader

需要先下载 @babel/core、@babel/preset-env 两个 Babel 包：

npm install @babel/core @babel/preset-env

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            "presets": [
                "@babel/preset-env"
            ]
        }
    }
}

下面的库在以下的代码中会用到，需要下载：

@babel/core babel 核心模块；
@babel/preset-env babel 必备模块，负责代码转码；
less 编写 less-laoder 时需要引入；
loader-utils 编写 webpack loader 的工具库；
schema-utils 一个可以校验变量类型的库；
mime 该模块可以获取文件后缀；

babel-loader

const babel = require("@babel/core");
const loaderUtils = require("loader-utils");

function loader(source){
    // loader 中有一个 this 指向 loaderContext
    // getOptions 可以获得 loader 中的 options 配置对象
    var options = loaderUtils.getOptions(this);

    // loaderContext 中有一个 async 方法
    // 这个方法是为了能异步的返回处理好的结果
    // cb 接受两个参数，第一个参数是 error 信息，
    // 第二个参数是 处理好 source 后的结果
    var cb = this.async();

    // babel 转码函数
    babel.transform(source,{
        ...options,
        // 在 loader 中指定了 sourceMap 后还需要在 webpack 中进行配置（devtool: 'source-map'）才能生成 sourceMap
        sourceMaps: true,
        // 指定文件的名字。resourcePath 就是文件所在的绝对路径（因此需要使用 split 方法）
        filename: this.resourcePath.split('/').pop()
    },function(err,result){
        // console.log(result);
        // 异步的返回结果
        // result.code 就是loader处理后的代码
        // result.map 就是 sourceMap
        cb(err,result.code,result.map);
    });
}

module.exports = loader;

banner-loader

banner-loader 是一个可以将注释插入到 js 文件页面顶部的 loader，这个 loader 可以表示 js 文件的一些说明。banner-loader 接受两个参数：text：直接传入一个注释用的字符串，filename：一个注释模板文件（路径），指定后就会读取模板文件中的内容。

{
    test: /\.js$/,
    use: {
        loader: 'banner-loader',
        options: {
            text: "xxxx",
            filename: ""
        }
    }
}

具体的实现源码：

const fs = require("fs");
const loaderUtils = require("loader-utils");
// schema-utils 是一个校验模块
const schemaUtils = require("schema-utils");

function loader(source){
    // 指定为 false 后，webpack 每次打包都不进行缓存
    // webpack 默认有缓存（有缓存是有好处的，可以节约时间）
    this.cacheable(false);
    var options = loaderUtils.getOptions(this);
    var cb = this.async();
    // 创建一个验证骨架
    var schema = {
        // 属性中的参数
        properties: {
            text: {
                type: "string",
            },
            filename: {
                type: 'string',
            }
        }
    }

    // 第三个参数表示不符合条件时报出的错误信息
    schemaUtils(schema, options, "banner-loader");

    if(options.filename){
        // 这个方法原理是这样的：
        // webpack 中可以指定 witch 配置为 true
        // 表示当需要打包的文件更改时，webpack会自动打包
        // 而 options.filename 中的文件更改后webpack并不会进行打包
        // 因此需要让 webpack 明白，该文件在修改后也会触发 witch 监听并自动打包
        this.addDependency(options.filename);
        // 读取文件
        fs.readFile(options.filename,"utf8",function(err,data){
            cb(err,`/** ${data} **/\r\n${source}`);
        });
    }else{
        // 指定的是text参数
        cb(null,`/** ${options.text} **/\r\n${source}`);
    }

    return source;
}

module.exports = loader;

file-loader 和 url-loader

file-loader

const loaderUtils = require("loader-utils");

/**
 * file-loader 的作用：
 * 根据图片生成一个 MD5 并发射到打包的目录下
 * file-laoder 还会返回当前的文件路径（在 js 中可以使用 import 方式进行引入）
 * @param {string} source
 */
function loader(source){
    // 根据当前的格式和文件内容来创建一个路径
    let filename = loaderUtils.interpolateName(this,'[name].[ext]',{
        content: source
    });
    // 发射文件
    this.emitFile(filename,source);
    // 返回文件的路径
    return `module.exports="${filename}"`;
}

// source 接受的是字符串，而图片是二进制文件
// 因此需要使用 raw 属性，将字符串转成 二进制数据
loader.raw = true;

module.exports = loader;

url-loader

const loaderUtils = require("loader-utils");
// mime 包可以获取文件的后缀
const mime = require("mime");

/**
 * url-loader 会处理路径
 * url-loader 有一个 options 选项：limit
 * limit 选项可以指定文件的大小（字节）
 * 当文件小于 limit 值时会生成 base64 的字符串
 * 大于 limit 值时才会像 file-loader 一样去处理文件
 * 因此，在 webpack 中使用了 url-loader 后，就不用再使用 file-loader 了。
 * @param {string} source
 */
function loader(source){
    var {limit} = loaderUtils.getOptions(this);
    if(limit && limit > source.length){
        // 转成 base64 格式
        return `module.exports="data:${mime.getType(this.resourcePath)};base64,${source.toString("base64")}"`;
    }else{
        // 否则的话就交给 file-loader 去处理
        return require("./file-loader").call(this,source);
    }
}
loader.raw = true;

module.exports = loader;

样式 loader 的编写

webpack 中的配置：

rules: [
    {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
    }
]

less-loader 的实现

less-loader 主要是将 less 格式的样式转成浏览器能认识的原生 css 代码。

首先需要先下载 less： npm install less。
编写 less-loader 的 loader 文件。

// less-loader
let less = require("less");
// source 就是 less 文件中的源码
function loader(source){
    let css;
    // less 中有一个方法
    // 这个方法可以处理 less 文件中的样式
    less.render(source,function(err,result){
        // 处理好后，回调函数中的 result 参数就是处理好后的结果
        css = r.css
    });
    // 返回处理好的结果
    return css;
}

module.exports = loader;

上面就完成了 less-loader 的编写。less-loader 的返回值回传给 css-loader，css-loader 再对样式做进一步的处理。处理好后再把处理好的结果返回，让 style-loader 接受，做最后的处理。

css-loader 的处理过程比较麻烦，这里先介绍一下 style-loader。

style-loader 的编写

style-loader 的作用是将 css 代码插入到 head 标签下的 style 标签中。

webpack 配置文件中的 use 数组中的第一个 loader 应该返回一个 JS 脚本（字符串格式的 JS 脚本），因此 style-loader 需要这么做。

// style-loader
const loaderUtils = require("loader-utils");

function loader(source){
    // 创建一个 style 标签，标签里的内容就是 css-loader 处理后的结果
    let str = `
        let style = document.createElement("style");
        style.innerHTML = ${JSON.stringify(source)};
        document.head.appendChild(style);
    `;
    // 返回这个 JS 脚本
    return str;
}

css-loader 的实现

css-loader 处理的是样式中引入的图片路径（url(xxx)）。

我们就需要想办法将源码中的 url() 字符串提取出来，然后给路径做替换。再把替换后的路径插入到源码中。

先说一下 JavaScript 正则表达式中的一个方法：exec。这个方法很强大。它的调用格式：reg.exec(str)。

这个方法会返回一个数组，数组里面是匹配到的字符串结果。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。RegExpObject 可以看做是正则表达式中的括号里匹配的内容。比如下面的字符串：

let str = `
    body{
        background: url('./01.jpg');
    }
    div{
        background: url('./02.png');
    }
`;

var reg = /url\((.+?)\)/g,
    res = reg.exec(str);
console.log(res);

打印的结果将返回一个数组：["url('./01.jpg')","'./01.jpg'"]。数组第一项正则表达式匹配的文本，而第二项匹配的是正则表达式中 (.+?) 中的内容。

exec 方法可以连续调用，当再次调用 var next = reg.exec(str) 时，将返回 ["url('./02.png')","'./01.png'"]。表示匹配下一个符合条件的的字符串。当匹配不到时会返回 null。

因此可以使用循环找出所有符合条件的结果：

var current = reg.exec(str),
    arr = [];
while(current){
    arr.push(current);
    current = reg.exec(str);
}

RegExpObject 中有一个 lastIndex 属性，当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。比如：

var reg = /123(abc)/g,
    str = 'qwe123abcqqq',
    reg.exec(str);
    console.log(reg.lastIndex);     // 9

因此利用 lastIndex 熟悉就可以将截掉的 css 代码拿出来，利用字符串的 slice 方法。

以下就是 css-loader 的源码：

// css-loader
function loader(source){
    // 匹配 url(xxx) 格式的字符串
    // 正则表达式的子项（括号里匹配的内容）匹配的就是纯粹的路径
    let reg = /url\((.+?)\)/g;
    let pos = 0;
    let current;
    let arr = ['let list = []'];

    // current
    while(current = reg.exec(source)){
        let [matchUrl,g] = current;
        // last 就是 url() 字符的第一个字符（u）前面的那个字符的索引
        let last = reg.lastIndex - matchUrl.length;
        // 将 url() 字符串的前面的内容添加到数组中
        arr.push(`list.push(${JSON.stringify(source.slice(pos,last))}`);
        // 然后 pos 等于 lastIndex，为了保存 url() 字符串后面的内容
        pos = reg.lastIndex;
        // 把 g 替换成 require 的写法 => url(require('xxx'))
        arr.push(`list.push('url('+require(${g}+')')`);
    }
    // url() 字符串后面的内容截取完即可
    arr.push(`list.push(${JSON.stringify(source.slice(pos))})`);
    // 最后将 list 拼接并导出（list 中存入的改过的 css 代码）
    arr.push(`module.exports = list.join('')`);
    return eval(arr.join('\r\n'));
}

我们还没有用到 pitch 函数，这里可以在 style-loader 中使用 pitch 函数（当然，不使用也可以，前面都已实现，这里只是再使用 pitch 模拟一下）：

// style-loader.js

const loaderUtils = require("loader-utils");

function loader(source){
    // 创建一个 style 标签，标签里的内容就是 css-loader 处理后的结果
    let str = `
        let style = document.createElement("style");
        style.innerHTML = ${JSON.stringify(source)};
        document.head.appendChild(style);
    `;
    // 返回这个 JS 脚本
    return str;
}

// 在 style-loader 上写 pitch
//（pitch 的执行顺序是从左到右，即：style-loader 先被执行）
// `style-loader` 的 pitch 有返回值时，
// css-loader 和 less-loader 的 pitch 就不在执行了。就是开始执行 `normal`。

loader.pitch = function(remainingRequest){
    // remainingRequest 表示为“剩余的请求”，
    // 在 pitch 中，先走的是 style-loader
    // 因此还剩下 css-loader 和 less-loader 没有执行
    // 所以，remainingRequest 就是 css-loader!less-loader! 当前文件路径（就是 less 文件路径） 的格式的字符串

    // 让 style-laoder 去处理 remainingRequest
    // loaderUtils.stringifyRequest 方法可以将绝对路径转成相对路径
    // !!css-loader!less-loader!less文件路径
    // remainingRequest 中的路径是绝对路径，需要转换一下
    // require 的路径返回的就是 css-loader 处理好的结果

    // innerHTML中 引用了 css-loader 和 style-loader
    // 这时就会跳过剩余的 pitch，开始获取资源，执行 normal。先执行 less-loader
    // 然后执行 css-loader 最后执行 style-loader
    var str = `
        let style = document.createElement('style');
        style.innerHTML = require(${loaderUtils.stringifyRequest(this,'!!' + remainingRequest)});
        document.head.appendChild(style);
    `;
    return str;
}

module.exports = loader;

以上就是样式 loader 的实现原理。