编写简易的loader和plugin

346 阅读1分钟

编写简易的loader

所谓的loader就是将匹配的内容通过一定逻辑的自主加工后将加工过后的文件返回的函数称为loader,也可以说是对于文件进行不同形式的转码的函数 loader-util插件通过getOptions()方法获取loader option的值 针对于webpack是4.0 的可以安装loader-utils v2版 webpack5 已经移除了getOptions()函数 eg:

const loaderUtils = require('loader-utils')
module.exports=function(source){
    //source代表的是根据loader test规则匹配到的字符串格式的源文件
    let options=loaderUtils.getOptions(this)//获取传到该loader中的option
    return source.replace('被替换内容','替换内容')
}

使用:对于vuecli而言

module.exports={
    chainWebpack:config=>{
        config.module.rules('js').test(/\.js$/).use('自定义loader的路径').loader('自定义loader的路径').option('传递到loader中的options选项通常以对象形式出现')
        //如上解释:定义一个规则是js名称的loader 匹配以.js结尾 所有的文件 运用自定的loader 通过option 将参数传入到自定义loader中
    }
}

编写简易的plugins

所谓的plugins是对loader功能的丰富化,解决loader无法实现的问题 也就是说它的作用可以理解成是对于程序功能的扩展。通常是一个类函数需要实例化使用 eg:

class CopyrightWebpackPlugin{
    constructor(name){
        //plugins 实例化传入的参数通常也是对象
        console.log(name)
        console.log(`我是插件${name.name}`)
    }
    apply(compiler){
        //同步插件
         //tap表示的是同步执行插件,没有手动执行cb(),tapAsync()异步执行插件 参数有两个:1.自定义plugin的名称2.回调函数(两个参数1.webpack本次打包的实例对象,2.回调函数,需要在功能完成后手动执行)
         // tapPromise()异步延迟执行  中的第一个参数则是bwepack的实例
    
        // 异步方式
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compiation,cb)=>{
            //compication 本次打包的构建实例 
            compiation.assets['index.text']={
                source(){
                    return '我是资源'
                },
                size(){
                  return 21
                }


            }
            cb()

        })

        compiler.hooks.afterPlugins.tap('CopyrightWebpackPlugin',(compiation)=>{
            //compiation则是本次构建中的资源信息
            console.log('插件以初始化完成')
           
        })
        //异步延迟
        compiler.hooks.run.tapPromise('CopyrightWebpackPlugin', compiler => {
        
          //compoler 则是webpack的实例
        
            
            return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
              console.log('以具有延迟的异步方式触及 run 钩子')
            })
          })
    }
}
module.exports=CopyrightWebpackPlugin
 //其他的hookapi参考webpack pluginapi   其中每一个hook函数中定义的参数指定的是回调函数的参数  hook函数下的asynchook 则代表同步hook AsyncSeriesHook 代表异步hook SyncBailHook异步延迟

使用:

  config.plugin('copys').use(CopyrightWebpackPlugin,[{name:"esetset"}]) //数组中存在多个对象的时候只取第一个对象