标签：const assets plugin compilation source webpack 原理 compiler

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()

标签：const,assets,plugin,compilation,source,webpack,原理,compiler
来源： https://www.cnblogs.com/littlelittleship/p/16500470.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。