Webpack 的 stats 、Compilation、compiler 对象里都有啥？

Question

最近想要了解一下 webpack 的 plugin 怎么写，于是各种文章就会告诉你想要写一个 plugin 那么你首先需要了解一下 Compilation、compiler 对象，然后 plugin 插件其实是一个含有 apply 方法的 class，而 apply 方法的参数就是 compiler 对象，compiler 对象里有各种钩子，这些钩子分别会在 webpack 的运行过程中触发，而实现这些钩子的核心是 tapable ，这个 tapable 还算好理解，可以把它看做是一个更高级的 发布-订阅。然后我想实现以下 done 这个 hook 的功能，你就会发现这个 hook 的参数是 stats 对象，所以问题来了，我想要去实现 一个 plugin，那么是真的要搞清这些对象了。

我先弄了一个最简单的 webpack 配置：

const path = require('path')
const myplugin = require('./myplugin')

const config = {
    entry: path.join(__dirname, 'index.js'),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new myplugin()
    ],
    mode: "development"
}

module.exports = config

myplugin 是实现在 compiler 的 done hook中，内容如下：

const fs = require('fs')

class HelloWord {
    apply(compiler) {
       compiler.hooks.done.tap('helloword', (stat) => {
           fs.writeFile('stat.json', JSON.stringify(stat, null, 2), {flag: 'w+'});         
           console.log('hello world')
       })
    }
}

module.exports = HelloWord

然后控制台会告诉你 stats 对象内有循环引用，所以 JSON.stringify 会报错，那么使用 StackOVerflow 的方法解决：

const fs = require('fs')
class HelloWord {
    apply(compiler) {
       compiler.hooks.done.tap('helloword', (stat) => {
           const cache = []
           fs.writeFile('stats.json', JSON.stringify(stat, (key, value) => {
            if (cache.indexOf(value) !== -1) {
                return;
            }
            cache.push(value);
           }))           
           console.log('hello world')
       })
    }
}

module.exports = HelloWord

好的，这下可以正常输出了，我们打开我们的文件，文件内容如下：https://www.wenjiangs.com/wp-content/uploads/2022/docimg16/demo.js，近 3000 行，真是让人望而却步呀。

不过我们经过格式化后，可以发现这个时候的 stats 对象其实是一个 compilation 对象加上 编译开始和结束的时间戳：

我们继续发现，我们可以发现在 这个 compilation 里面包含了 compiler 对象，好的，那先看看 compiler 对象，如下：https://www.wenjiangs.com/wp-content/uploads/2022/docimg16/demo2.js，粗略看一下，可以发现 这里主要是 webpack 的配置，输入、输出、监听文件系统的描述，输出地址，compiler 对象的 hooks 等。

我们再看看 compilation 对象，这个对象主要有 assert 、 modules、 chunks、entries的信息。