loader

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

更多的功能要借助 webpack loader 和 webpack plugins 完成

loader 本质上是一个函数，作用是将某个源码字符串转换成另一个源码字符串返回

在 webpack 的编译过程中，有一个步骤是：读取文件内容 --> 对文件内容进行语法分析 --> 生成 AST 抽象语法树

也就是说，webpack 是把文件当作 js 代码来处理的

但是有些时候，我们的文件内容并不是符合 js 语法的，所以就没有办法进行语法分析，也就不能进行后续的编译

这时候就需要 loader，通过 loader 这个函数，可以对 source code 进行一个转换，转换成 webpack 可以进行语法分析的代码

如图：

处理 loaders 的流程：

loaders 的配置：

module.exports = {
    mode: "development",
    module: {
        rules: [// 模块的匹配规则
            // 每个规则就是一个对象
            {
                // 正则表达式，匹配模块的路径
                test: /index\.js/,
                // 对于匹配的文件要使用哪些 loader
                use: [
                    // 每个加载器的使用是一个对象
                    {
                        // 加载器的路径
                        loader: "./loader/test-loader"
                    }
                ]
                // 第二种写法
                // use: ["loader1", "loader2"]
            },
        ], 
        // noParse 是否不要解析某些模块
    }
}

补充：option 里面的参数可以用 loader-utils 读出来

注意：拿到已经匹配好的 loaders 的数组之后是从后往前匹配的