plugin的原理

plugin插件的原理

扩展webpack, 加入自定义的构建行为

webpack内部的钩子 hooks

• tap: 可以注册同步钩子和异步钩子
• tapAsync: 回调方式注册异步钩子
• tapPromise: promise方式注册异步钩子

Compiler构建对象, 保存着完整的webpack环境配置

• compiler.options: 可以访问所有配置文件, 如entry, output, plugin,loader等
• compiler.inputFileSystem和compiler.outputFileSystem可以进行文件操作, 相当于nodejs中的fs
• compiler.hooks 可以注册不同种类的hook

Compilation对象代表一次资源的构建, 可以访问所有模块和它们的依赖

• compilation.modules: 所有的模块
• compilation.chunks: 多个modules组成的代码块
• compilation.assets: 本次打包生成的文件结果
• compilation.hooks: 注册不同类型的hook

创建一个plugin

/**
 * 1. webpack加载webpack.config.js的所有配置, 此时会new 插件, 执行插件的constructor方法
 * 2. webpack创建compiler对象
 * 3. 遍历所有plugins里面的插件, 调用插件的apply方法
 * 4. 执行剩下的编译流程, 触发各个hook事件
 */

class BannerWebpackPlugin {
    constructor() {

    }
    apply(compiler) {
        // emit 文件输出前, tapAsync 异步
        compiler.hooks.emit.tapAsync("BannerWebpackPlugin", compilation => {
            // 获取输出资源: compilation.assets
            // 只处理 js , css,  图片不能处理
            const extensions = ['css', 'js']
            // 获取需要处理的文件类型
            const assets = Object.keys(compilation.assets).filter(asset => {
                const arr = asset.split('.')
                const fileExt = arr[arr.length - 1]
                return extensions.includes(fileExt)
            })
            const prefix = `/*
            * Author: 法外狂徒
            */
            `
            assets.forEach(asset => {
                // 获取原来的内容 source()
                const source = compilation.assets[asset].source()
                const content = prefix + source
                compilation.assets[asset] = {
                    // 最终输出资源时,调用source方法, source方法的返回值是资源的具体内容
                    source() {
                        return content
                    },
                    // 资源大小
                    size() {
                        return content.length
                    }
                }
            })
        })
    }
}

module.exports = BannerWebpackPlugin

使用

const BannerWebpackPlugin = require('../plugins/banner-webpack-plugin')

new BannerWebpackPlugin()