如何配置webpack的loader

loader本质上是一个函数，将其作为模块，使用CommonJS规则导出，其作用是将某个字符串转换成另一个源码字符串返回，在模块解析的过程中被调用，以得到最终的源码。一般情况不会让我们写一个loader的，而且也有大佬开发好用的loader可以使用，因此我们来了解一下如何配置一个loader。

之前讲过一些webpack的其他配置，有问题的话，可以点击这里。打开 webpack.config.js 文件，我们在module属性中对loader进行配置，代码如下

module.exports = {
    mode : "production",
    module: {    //开始配置loader
        rules: [
            {   //规则1
                test: /index\.js$/,     //正则表达式，匹配模块的路径,该行表示匹配文件名为index.js的文件
                use:["./loaders/loader1","./loaders/loader2"]   //匹配到文件之后，使用哪些loader，顺序是从后到前，该行表示匹配到index.js文件后，先过loader2加载器，再过loader1加载器
            },
            {   //规则2
                test: /\.js$/,      //该行表示匹配后缀名为js的文件
                use: ["./loaders/loader3","./loaders/loader4"]
            }
        ]
    }
}

上述代码在打包的时候，先按照test中的正则表达式匹配到文件，（以下是个人理解）然后将文件对应的loader按照use中的顺序放入一个空间，注意的是若满足规则一正则表达式匹配的文件同时满足规则二的正则表达式，则将规则二中的加载器放在该文件对应的空间中规则一的加载器的后面，执行时，从该空间最后一个加载器开始向前执行