webpack 中的插件

yarn add webpack webpack-cil -D

webpack.config.js

let path = require('path')
let DonePlugin = require('./plugins/DonePlugins')
let AsyncPlugins = require('./plugins/AsyncPlugins')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new DonePlugin(),    // 同步
        new AsyncPlugins()   // 异步
    ]
}

node_modules/webpack/lib中查看Compiler.js

1. 同步plugins/DonePlugins

打包完成

class DonePlugins {
    apply (compiler) {
        console.log(1);
        compiler.hooks.done.tap('DonePlugin', (stats) => {
            console.log('编译完成');
        })
    }
}


module.exports = DonePlugins

1. 异步plugins/AsyncPlugins

``` class AsyncPlugins { apply (compiler) { console.log(2); compiler.hooks.emit.tapAsync('AsyncPlugin', (complete, callback) => { setTimeout(() => { console.log('文件发射出来'); callback() }, 1000) }) compiler.hooks.emit.tapPromise('AsyncPlugin', (complete, callback) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('文件发射出来 222'); resolve() }, 1000) }) }) } }

module.exports = AsyncPlugins