@(webpack)

6-3如何编写一个Plugin

一、回顾Loader和Plugin

1、Loader、Plugin的区别

Loader：当我们在源代码里引入其他格式的文件，帮助我们处理模块；loader是函数
plugin：打包的时候，在打包的某一时刻做处理；plugin是类

2、编写一个简单的Plugin

（稍微有些复杂，但是有必要学习，webpack源代码有80%基于plugin编写；plugin是webpack的灵魂。）

Plugin核心机制：事件驱动、发布订阅的设计模式。代码执行是通过事件驱动的

初始化环境步骤：
（1）建一个文件夹，npm init
（2）创建一个'src/index‘文件夹
（3）安装webpack、webpack.cli。编写webpack.config.js 配置
目标： 当整个打包结束后，生成一个版权文件的插件
（4）创建一个plugins文件夹 copyright-webpack-plugin.js

 // 基本写法
class CopyRightWebpackPlugin {
  constructor(){
    console.log("我成功运行了")
  }
  apply(complier){}
}
module.exports = CopyRightWebpackPlugin;

（5）引入插件
（6）使用，实例化插件，（终于知道为什么plugin中总是要new了）

const path = require('path')
const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin')

module.exports={
  mode:'development',
  entry:{main:'./src/index.js'},
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].js'
  },
  plugins:[
    // 终于知道为什么plugin中总是要`new`了,plugin是类，需要实例化；可是为什么会想用类？
    new CopyRightWebpackPlugin() 
  ]
}

（7）引入成功运行结果

image.png

（8）在使用插件时可以传入参数，传给了constructor 的options

image.png

image.png

（9）.在结束时使永applyhooks 实现添加版权

明确概念理解：
hooks钩子函数，作用类似react、vue 的生命周期函数，都是用来在某一时间做某些操作的函数
可以去查看官网，有hooks的概念地址

apply 中接受了一个参数，compiler参数是webpack的实例。这里存储了打包配置和实例

compiler.hooks.emit.tapAsync('插件的名称',(compilation,cb)=>{
    cb（）
})

complation存放 跟这次打包相关的内容

class CopyRightWebpackPlugin {
  constructor(ops){
    console.log("我成功运行了",ops)
  }
  apply(complier){ 
  // 同步
    complier.hooks.compile.tap('CopyRightWebpackPlugin',
      console.log('同步钩子调用')
    )
    //异步
    complier.hooks.emit.tapAsync('CopyRightWebpackPlugin',((compilation,cb)=>{
      compilation.assets['copyright.txt']={
        source:function(){
          return 'copy by mtg'
        },
        size:function(){
          return 11
        }
      }
      cb(); //一定要回调，这是一个异步函数，亲测必须回调，估计是告诉他已经完成，然后进入下一个步骤
    }))
  }
}
module.exports = CopyRightWebpackPlugin;

小tips
问：你是怎么知道complition中有assets的
答：写插件的时候可以使用node

image.png

显示使用，可以传递参数进入 如 inspect --inspect-brk 开启调试工具，在第一行多个断电

image.png

开启node 后，有个node图片，点击后就可以看到打包流程执行过程
调试方法：

image.png