如何编写一个Plugin

一、Loader和Plugin的区别

当我们在源代码中引入一个js或者其他格式的文件的时候，我们可以使用Loader处理引用的这个文件。这就是Loader的作用，它帮我们处理模块。

Plugin在我们打包的某个时刻帮助我们做一些事情，比如打包结束的时候使用HtmlWebpackPlugin插件自动生成HTML文件，或者在打包之前把dist目录清空，可以使用CleanWebpackPlugin这个Plugin。

Webpack的Plugin的核心机制是事件驱动，发布订阅模式

二、编写一个插件

1、新建一个文件夹，命名plugin。
2、在plugin目录下初始化项目：npm init -y。
3、安装webpack、webpack-li：npm i webpack webpack-cli -D
4、在plugin目录下新建src目录，写业务代码。
5、在plugin目录下新建一个plugins文件夹，用来书写plugins代码。
6、在plugin目录下新建webpack.config.js配置文件。

插件是一个类，在plugins文件夹下添加copyright-webpack-plugin.js，代码如下：

class CopyrightWebpackPlugin {
    constructor() {
        console.log('插件被使用了--')
    }
}

module.exports = CopyrightWebpackPlugin

webpack配置文件代码如下：

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

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    plugins: [
        new CopyrightWebpackPlugin()
    ],
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "[name].js"
    }
}

执行webpack配置文件，发现插件被执行了。

当调用一个插件的时候会执行其中的apply方法，该方法会传递一个参数compiler。调用插件的时候传递参数可在new CopyrightWebpackPlugin()中添加

    new CopyrightWebpackPlugin({
            name: 'zhangsan'
        })

此时在插件的constructor中可以获取

  constructor(option) {
        console.log('插件被使用了--',option)
    }

compiler.hooks有很多钩子函数，定义了打包过程中的某些时刻。例如，emit是生成资源到 output 目录之前。

异步的方法用compiler.hooks.emit.tapAsync

    compiler.hooks.emit.tapAsync( 'CopyrightWebpackPlugin',(compilation,cb) => {
            ...
            cb()
        })

compiler存放着打包的所有内容，compilation存放的只是本次打包相关的内容。

同步方法用compiler.hooks.compile.tap

    compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
            console.log('compile')
        })

以下插件实现向打包后的文件添加copyright的txt文件：

class CopyrightWebpackPlugin {

    apply(compiler){
        compiler.hooks.emit.tapAsync( 'CopyrightWebpackPlugin',(compilation,cb) => {
            compilation.assets['copyright.txt'] = {
                source: function (){
                    return 'copyright by zhangyang'
                },
                size: function(){
                    return 22 // 文件大小
                }
            }
            cb()
        })
    }
}

module.exports = CopyrightWebpackPlugin