webpack-loader

柔光的暖阳◎ 2021-08-26 13:26 404阅读 0赞

# loader #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]loader函数的将在模块解析的过程中被调用，以得到最终的源码。

**全流程：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]

**chunk中解析模块的流程：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 2]**chunk中解析模块的更详细流程：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 3]**处理loaders流程：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 4]**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中
                }
            ]
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]: /images/20210813/c3338aec5f924af89dd91f396e46d2d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]: /images/20210813/5488259eb8d5402bbb5e2c84cbb8dc40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 2]: /images/20210813/172e265d72684d4fb41ccea585281057.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 3]: /images/20210813/8a359672ae5e4b81a79c4524e0581cb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 4]: /images/20210813/0225441c686b4be6bfd385cb745e44ef.png

webpack-loader

发表评论取消回复

还没有评论，来说两句吧...

相关阅读