webpack如何编写一个plugin

在某一些具体时刻上做出某一些动作是插件生效的场景

设计模式：数据驱动，发布订阅 代码之间的执行通过事件来驱动的

此插件介绍：整个打包业务结束,在dist目录下生成一个版权文件的功能实现

cnpm init -y

cnpm install webpack webpack-ci --save

src 
    index.js
        console.log('hello world')

webpack.config.js
    const path = require('path')

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

package.json
    scripts: {
        build: webpack
    }

//插件模板
plugins
    copyright-webpack-plugin.js
        class CopyrightWebpackPlugin {
            constructor() {

            }

            apply(compiler) {//参数为webpack的实例

            }
        }

    module.exports = CopyrightWebpackPlugin;


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

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

将打包后的资源加入到文件夹之前 异步的时刻

plugins
    copyright-webpack-plugin.js
        class CopyrightWebpackPlugin {
            apply(compiler) {//参数为webpack的实例
                compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { 
                    debugger;
                    compilation.assets['copyright.txt'] = {
                        source: function() {
                            return 'copyright by dell lee'
                        },
                        size: function() {
                            return 21
                        }
                    };
                    cd();//必须调用 callback
                })
            }
        }

    module.exports = CopyrightWebpackPlugin;
    //compiler.hooks.emit.tapAsync  将打包后的资源加入到文件夹之前，tapAsync  异步的时刻
    //'CopyrightWebpackPlugin'      方法的名称 
    //compilation                   存放跟这次打包有关的内容
    //compilation.assets            存放这次打包内容的位置
    //compilation.assets['copyright.txt']    往compilation.assets添加copyright.txt这个文件
    //source    往里面添加的内容是什么
    //size      文件大小
    //compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation)       同步的时刻写法

编写webpack插件时 通过node调试工具查看其中内容

package.json
    scripts: {
        debug: node --inspect --inspect-brk node_modules/webpack/bin/webpack.js
    }

使用node执行webpack.js这个文件,运行webpack.js的时候,传递一些node的参数进去 --inspect 开启node调试工具 --inspect-brk 在运行webpack.js做调试的时候第一行上打一个断点

作用: 制作插件时查看compilation里面的参数时 debugger;

浏览器-> f12 -> 点击node图标 -> 在watch中监听对变量的内容

文件资料： compiler的资料 webpack官网 api-》Complier