如何写一个webpack plugin，帮你升职加薪

我们经常使用到webpack的插件功能,那如何开发一个自定义的插件呢?首先创建插件比创建 loader 更加高级,webpack 插件由以下组成：

一个 JavaScript 命名函数。
在插件函数的 prototype 上定义一个 apply 方法。
指定一个绑定到 webpack 自身的事件钩子。
处理 webpack 内部实例的特定数据。
功能完成后调用 webpack 提供的回调。

下面就一点点的带你开发一个自定义的webpack plugin.

先说说webpack插件中的两位重要人物,Compiler和Compliation

compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。

基础插件架构

///src/plugins/helloPlugin.js
// 命名函数。
function HelloPlugin(options) {
    // 使用 options 设置插件实例……
    console.log(options);
}
 
//插件函数的 prototype 上定义一个 apply 方法
HelloPlugin.prototype.apply = compiler => {
    //hooks
     compiler.hooks.done.tap('HelloPlugin', status => {
        console.log(status.toJson());
 
    })
     
    // 旧版本的相关钩子
    //compiler.plugin('done' , () => {
      //  console.log('hello world');
    //})
 
    // 设置回调来访问 compilation 对象：
    //compiler.plugin('compilation', compilation => {
 
        // 现在，设置回调来访问 compilation 中的步骤：
       // compilation.plugin('optimize', () => {
            console.log('optimize');
        //})
 
    //})
}
 
module.exports = HelloPlugin

//webpack.config.js
 
const HelloPlugin = require('./src/plugins/helloPlugin')
plugins: [
        new HelloPlugin({options:true})
    ]

这样基础架构就搭建完成了.

认识一下事件钩子

生命周期钩子函数，是由 compiler 暴露，可以通过如下方式访问：

1	`compiler.hooks.someHook.tap(...)`

取决于不同的钩子类型，也可以在某些钩子上访问 tapAsync 和 tapPromise。

例如

// 在处理来自webpack选项的entry配置后调用
    compiler.hooks.entryOption.tap('HelloPlugin', (context, entry) => {
        console.log(1,context, entry);
    })

也支持自定义钩子函数

// 自定义hook
 const SyncHook = require('tapable').SyncHook;
// 具有 `apply` 方法……
if (compiler.hooks.myCustomHook) throw new Error('Already in use');
compiler.hooks.myCustomHook = new SyncHook(['a', 'b', 'c'])
// 在你想要触发钩子的位置/时机下调用……
compiler.hooks.myCustomHook.call(a, b, c);  

学会了webpack的事件生命周期钩子函数,那么下面我们就开始着手写一个webpack插件.

生成一个展示打包完成后的文件列表,ok,直接上代码

// 命名函数。
function HelloPlugin(options) {
    // 使用 options 设置插件实例……
    console.log(options);
}
 
//插件函数的 prototype 上定义一个 apply 方法
HelloPlugin.prototype.apply = compiler => {
    // 在将资产释放到输出目录后调用。
    compiler.hooks.emit.tapAsync('HelloPlugin', (compilation, callback) => {
        let fileList = `## in this build:\n\n`
 
        console.log(compilation.assets);
        const assets = compilation.assets
        for(let key in assets){
            console.log(key);
            fileList+=`${key}\n`
        }
        compilation.assets['fileList.md'] = {
            source:()=>{return fileList},
            size:() => {return fileList.length}
        }
        callback()
    })
}
module.exports = HelloPlugin