前端工程化之：webpack1-8(loader)

一、loader

webpack 做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

更多的功能需要借助 webpack loaders (加载器)和 webpack plugins (插件)完成。

webpack loader ： loader 本质上是一个函数，它的作用是webpack 打包过程中将某个源码字符串转换成另一个源码字符串返回。

loader 函数的位置在编译时，处于读取文件内容之后， AST 抽象语法树分析之前的语法分析过程中， loader 函数将源代码转化为新代码后，进行语法树分析。 loader 函数将在模块解析的过程中被调用，以得到最终的源码。

1.全流程：

2. chunk 中解析模块的流程：

3. chunk 中解析模块的更详细流程：

4.处理 loaders 流程：

5. loaders 配置：

（1）完整配置

javascript 复制代码

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /\.js$/, //匹配的模块正则
                use: [ //匹配到后应用的规则模块
                    {  //其中一个规则
                        loader: "模块路径", //loader模块的路径，该字符串会被放置到require中
                        options: { //向对应loader传递的额外参数
                            changeVar: "变量"
                        }
                    }
                ]
            }
        ]
    }
}

读取 loader 中传过来的参数，在模块路径下的 js 文件中引入 loader-utils 插件，插件下载命令：

javascript 复制代码

npm i -D loader-utils

./loaders/test-loader 文件中，通过引入 loader-utils 插件的 getOptions(this) 获取到参数：

javascript 复制代码

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

module.exports = function (sourceCode) {
  // sourceCode ： 变量 a = 1;
  console.log("test-loader运行了");
  console.log(this); // this 为 loader 的 context上下文，接收参数
  var options = loaderUtils.getOptions(this); // 拿到loaders配置中的参数
  console.log("options", options);
  var reg = new RegExp(options.changeVar, "g"); // 通过正则匹配
  sourceCode = sourceCode.replace(reg, "var"); // 将匹配的参数都替换为var
  return sourceCode;
};

loaders 也可通过在模块路径上以 query 的形式传递，读取参数方法与上方一致：

javascript 复制代码

loader: "./loaders/test-loader?changeVar=未知数", // 加载器的路径

（2）简化配置

loaders 的参数配置中也可以是数组：

javascript 复制代码

module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /index\.js$/, //匹配的模块正则
                use: ["模块路径1", "模块路径2"]//loader模块的路径，该字符串会被放置到require中
            }
        ]
    }
}

（3） loader 匹配规则

从上到下匹配，将每次匹配得到的数组都放到一个空数组内，然后从后往前使用，一层一层处理，最后处理到 loader1 。

webpack.config.js ：

javascript 复制代码

module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /index\.js$/, //正则表达式，匹配模块的路径
                use: ["./loaders/loader1", "./loaders/loader2"] //匹配到了之后，使用哪些加载器
            }, //规则1
            {
                test: /\.js$/, //正则表达式，匹配模块的路径
                use: ["./loaders/loader3", "./loaders/loader4"] //匹配到了之后，使用哪些加载器
            } //规则2
        ], //模块的匹配规则
    }
}

loader.js：

javascript 复制代码

//loader1.js
module.exports = function(sourceCode){
    console.log("loader1");
    return sourceCode;
}

//loader2.js
module.exports = function(sourceCode){
    console.log("loader2");
    return sourceCode;
}

//loader3.js
module.exports = function(sourceCode){
    console.log("loader3");
    return sourceCode;
}

//loader4.js
module.exports = function(sourceCode){
    console.log("loader4");
    return sourceCode;
}

最后将 loader4 结果返回给 loader3 ，再返回给 loader2 ，最后 loader1 。输出结果为：

javascript 复制代码

loader4
loader3
loader2
loader1

这里如果 index.js 依赖 a.js
a.js 又匹配到 loader3 和 loader4

javascript 复制代码

loader4
loader3
loader2
loader1
loader4
loader3

**需要注意的是：**由于要对打包文件进行 loader 规则处理，所以要在打包过程中读取 loader 文件，即在 node 环境中，所以这里使用 CommonJs 。