webpack --- 两大插件之Loader

loader

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。
更多的功能需要借助webpack loaders和webpack plugins完成。

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e1vGZRHw-1600502783985)(assets/2020-01-13-10-39-24.png)]

loader函数的将在模块解析的过程中被调用，以得到最终的源码。

全流程：

chunk中解析模块的流程：

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

处理loaders流程：

loader配置：

完整配置

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

                        }
                    }
                ]
            }
        ]
    }
}

简化配置

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /\.js$/, //匹配的模块正则
                use: ["模块路径1", "模块路径2"]//loader模块的路径，该字符串会被放置到require中
            }
        ]
    }
}

扩展

webpack loader 加载器
webpack plugins 插件工具

loader

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

回顾chunk分析过程

chunk内部 入口------> 模块文件 ------>(检查记录)------->若是记录则结束，未记录继续
----->读取文件内容----->(进行语法分析)------>进行抽AST象语法树的----->(保存依赖关系)----->
保存到dependencies中------>替换依赖函数保存转换后的代码模块

loader

是在进行语法分析是进行处理

当前模块是否满足某个语法规则 需要进行配置
若满足读取的相应的规则对应的loaders-----到loaders数组
若是没有则返回空数组到------loaders数组

实际是从下往上匹配的