plugin插件的原理
扩展webpack, 加入自定义的构建行为
webpack内部的钩子 hooks
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()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。