解惑之webpack中loader和plugin的实现

前言
webpack中最核心的两个概念无非就是loader和plugin，loader作为转换器，弥补了webpack本身只能打包js和json文件的缺陷，loader为增强webpack打包而生。plugin作为扩展器，扩展了webpack的功能，使得webpack不仅可以在依赖loader的情况下打包任意资源，而且借助plugin的加持，可以实现项目优化层面上的事情，如压缩、分块、tree-shaking等，一直很迷惑loader和plugin的工作原理是什么，现在来实现一下这两个东西。

Loader

loader本身是一个函数，注入文件内容作为参数，将处理完的内容返回。
loader在webpack中的用法是这样的:

module: {
	rules: [
		{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
	]
}

其中:
test:表示匹配的文件正则
use:表示处理匹配的文件使用的loader，执行顺序为从后往前
loader 本身是一个函数，当 webpack 解析资源的时候，会调用相关的 loader 去处理，loader 函数被注入文本内容作为参数，将处理完的内容返回出去。

loader的实现:
需求1: 开发中，我们为了进行调试或者检查，会进行很多的console.log()，那么当该文件被打包时，这些console.log()就是多余了，因此我们可以实现一个loader，去除打包文件中的console.log()。

module.exports = function(content){
    return content.replace(/console\.log\(.*\);?/g,'')
}

需求2: 实现对编译打包的文件加上作者的信息，这个时候就可以借助loader来实现。

    module.exports = function(content){
        // 在配置loader的时候可传入配置项options，在这里可以取到
        const options = this.getOptions({
            type:"object",
            properties:{
                author:{
                    type:"string"
                }
            },
            addtionalProperties:false
        })

        const prefix = `
            /* 
            * Author:${options.author}
            */
        `

        return  prefix + content 
    }

使用loader时:

    module:{
      rule:[
        {
          test:/$.js/,
          loader:'./banner-loader',
          options:{
            author:'张三'
          }
        }
      ]
    }

Plugin

plugin是一个带有apply方法的对象。

plugin原理:

plugin通过扩展webpack功能，使得webpack可以执行更加广泛的任务，webpack在编译过程中，会触发一系列的钩子事件，插件就是找到相应的钩子，往上面挂自己的任务，也就是注册事件，这样当webpack构建的时候，插件注册的事件就会随着钩子的触发而执行了。

plugin中的核心概念:

1. compiler:compiler对象中保存着完整的webpack环境配置，该对象仅会在webpack首次启动时创建，通过compiler对象可以访问到 entry 、 output 、 plugin 、loader 等配置信息。
2. compilation:complition对象代表一次资源的构建，compilation实例能够访问所有的模块和他们的依赖。一个compilation对象会对构建依赖图中的所有模块进行编译。

plugin的生命周期:

关键的生命周期:

1. make:compilation结束之前执行。
2. emit:输出assets到output目录之前执行。
3. compile:beforeCompile 之后立即调用，但在一个新的 compilation 创建之前。

plugin的实现:
_需求1:_实现一个plugin，用于获取静态文件的文件大小，并将其输出到对应的文件当中。

    class AnalyzeWebpackPlugin {
        apply(compiler){
          // 调用emit钩子
            compiler.hooks.emit.tap('AnalyzeWebpackPlugin',(compilation) => {
                const assets = Object.entries(compilation.assets)

            /*           二维数组：
                        [
                            [key1, value1],
                            [key2, value2]
                        ] 
            */
                
                /*
                        md中表格语法：
                        | 资源名称 | 资源大小 |
                        | --- | --- |
                        | xxx.js | 10kb |
                */
                
                let content = `| 资源名称 | 资源大小 |`
                assets.forEach(([filename,file]) => {
                    content += `\n | ${filename} | ${Math.ceil(file.size() / 1024)} kb`
                })

                compilation.assets['analyze.md'] = {
                    source(){
                        return content
                    },
                    size(){
                        return content.length
                    }
                }
            })
        }
    }

    module.exports = AnalyzeWebpackPlugin

我们首先通过compilation来获取assets对应输出的所有文件，通过Object.entries将文件这种key-value对象类型变为二维数组，然后我们通过遍历这个数组去计算文件大小拼接内容，最后将我们设置的文件输出到dist目录中。

_需求2:_实现一个plugin,实现仅将静态资源文件中的css和js文件进行添加作者信息的扩展功能。

    class BannerWebpackPlugin {
       	// 创建plugin实例时需传入options配置对象 
        constructor(options = {}){
            this.options = options
        }

        apply(compiler){
            compiler.hooks.emit.tap('BannerWebpackPlugin',(compilation) => {
                // 仅保留css和js文件
                const extensions = ['css','js']
                const assets = Object.keys(compilation.assets).filter((assetPath) => {
                    // 将文件名切割成这种形式，便于发现css和js文件 ['xxx','js'],['xxx','css']
                    const splitted = assetPath.split('.')
                    // 获取扩展名
                    const extension = splitted[1]
                    return extensions.includes(extension)
                })

                // 现在assets中文件全为css和js文件

                // 创造注释，作为前缀加到静态资源文件中
                const prefix = `
                    /* 
                        Author:${this.options.author}
                    */
                `

                // 注意 assets forEach 遍历的话，每一个item项是[filename,file]
                assets.forEach((asset) => {
                    // 获取原来文件中的内容
                    const source = compilation.assets[asset].source()
                    // 拼接注释
                    const content = prefix + content

                    compilation.assets[asset] = {
                        // 最终资源输出时，调用source方法，source方法的返回值就是资源的具体内容
                        source(){
                            return content
                        },
                        // 资源大小
                        size(){
                            return content.length
                        }
                    }
                })

            })
        }
    }

    module.exports = BannerWebpackPlugin