webpack学习 - loader

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

更多的功能需要借助loader和plugin完成

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

比如css-loader、style-loader
loader函数将在模块解析的过程中被调用，以得到最终源码

变量 a = 1

上述代码会报错，是在AST抽象语法树的那一步报错的
loader return后的结果会在AST抽象语法树那一步继续被执行
创建一个laoder.js文件，得到转化后的代码，如下：

module.exports = function(sourseCode){
	// sourseCode 相当于你自己写的源代码，传进来
	// 返回新的代码格式后进行抽象语法树分析
	return ""
}

要将loader应用到webpack中，需要进行处理
在读取内容之后，分析抽象语法树之前，处理loaders
配置到webpack.config.js中的rule中中，如下：
判断当前模块是否满足某个规则，如果满足，就读取规则中对应的loaders

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