webpack中loader和plugin看这一篇就够了

野性酷女 2023-09-27 15:31 90阅读 0赞

## loader ##

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

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

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

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

**全流程：**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8gY9kPR-1678196397849)(assets/2020-01-13-09-28-52.png)\]][img-Y8gY9kPR-1678196397849_assets_2020-01-13-09-28-52.png]

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkhFUhzE-1678196397849)(assets/2020-01-13-09-29-08.png)\]][img-fkhFUhzE-1678196397849_assets_2020-01-13-09-29-08.png]

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

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cC6RWGmE-1678196397849)(assets/2020-01-13-09-35-44.png)\]][img-cC6RWGmE-1678196397849_assets_2020-01-13-09-35-44.png]

**处理loaders流程：**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VUP4Q4NL-1678196397849)(assets/2020-01-13-10-29-54.png)\]][img-VUP4Q4NL-1678196397849_assets_2020-01-13-10-29-54.png]

**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中
                }
            ]
        }
    }

## plugin ##

loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如：

*  当webpack生成文件时，顺便多生成一个说明描述文件
 *  当webpack编译启动时，控制台输出一句话表示webpack启动了
 *  当xxxx时，xxxx

这种类似的功能需要把功能嵌入到webpack的编译流程中，而这种事情的实现是依托于plugin的

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eQ9gJZE8-1678196611647)(assets/2020-01-15-12-45-16.png)\]][img-eQ9gJZE8-1678196611647_assets_2020-01-15-12-45-16.png]

plugin的**本质**是一个带有apply方法的对象

var plugin = {
        
        apply: function(compiler){
        
            
        }
    }

通常，习惯上，我们会将该对象写成构造函数的模式

class MyPlugin{
        
        apply(compiler){
        
    
        }
    }
    
    var plugin = new MyPlugin();

要将插件应用到webpack，需要把插件对象配置到webpack的plugins数组中，如下：

module.exports = {
        
        plugins:[
            new MyPlugin()
        ]
    }

apply函数会在初始化阶段，创建好Compiler对象后运行。

compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation

apply方法会在**创建好compiler对象后调用**，并向方法传入一个compiler对象

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EcOGu6bg-1678196611648)(assets/2020-01-15-12-49-26.png)\]][img-EcOGu6bg-1678196611648_assets_2020-01-15-12-49-26.png]

compiler对象提供了大量的钩子函数（hooks，可以理解为事件），plugin的开发者可以注册这些钩子函数，参与webpack编译和生成。

你可以在apply方法中使用下面的代码注册钩子函数:

class MyPlugin{
        
        apply(compiler){
        
            compiler.hooks.事件名称.事件类型(name, function(compilation){
        
                //事件处理函数
            })
        }
    }

**事件名称**

即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks

**事件类型**

这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库。

它提供了一些事件类型：

*  tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束
 *  tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束
 *  tapPromise：注册一个基于Promise的异步的钩子函数，函数通过返回的Promise进入已决状态表示事件处理结束

**处理函数**

处理函数有一个事件参数`compilation`

[img-p7AmUCs8-1678196397848_assets_2020-01-13-10-39-24.png]: https://img-blog.csdnimg.cn/04b247a899414716ac1c805d92a7a460.png
[img-Y8gY9kPR-1678196397849_assets_2020-01-13-09-28-52.png]: https://img-blog.csdnimg.cn/76acb742beb041f298998f0f61e019ef.png
[img-fkhFUhzE-1678196397849_assets_2020-01-13-09-29-08.png]: https://img-blog.csdnimg.cn/a0cd50db76ee49cea6ff1a4224e52663.png
[img-cC6RWGmE-1678196397849_assets_2020-01-13-09-35-44.png]: https://img-blog.csdnimg.cn/1755f17705e84fe89cf604d9e8271579.png
[img-VUP4Q4NL-1678196397849_assets_2020-01-13-10-29-54.png]: https://img-blog.csdnimg.cn/24dbfec1b2c84558a08d54680f7d2652.png
[img-eQ9gJZE8-1678196611647_assets_2020-01-15-12-45-16.png]: https://img-blog.csdnimg.cn/2ab3919fd8544067bcd1ed4f2934738b.png
[img-EcOGu6bg-1678196611648_assets_2020-01-15-12-49-26.png]: https://img-blog.csdnimg.cn/429a7796d74845df8280766b5153d62f.png