我是石灰
学习webpack, 除了要了解它的基础配置 还要了解它的底层实现
包括: 实现自定义loader、plugin、了解打包原理
Talk is cheap!! 上代码
// 如何⾃⼰编写⼀个Loader
// Loader就是⼀个函数，声明式函数，不能⽤箭头函数
// 拿到源代码，作进⼀步的修饰处理，再返回处理后的源码就可以了
// API： this.callback this.async
// 上一个loader的返回结果是当前loader的入参
module.exports = function (source) {
const callback = this.async();
setTimeout(() => {
const result = source.replace("webpack", this.query.name);
callback(null, result);
}, 3000);
};
实现自定义loader的原理: loader是一个函数, 因为有自己的this 所以不能使用箭头函数. 入参是上一个loader返回的source, 出参是经过处理的source, 这恰好证明了loader是有执行顺序的. 同步loader用this.callback 异步loader使用 this.async
接下来说一下如何实现自定义plugin:
原理: webpack构建过程中会经历多个阶段,包含声明周期、hook、事件等, 在每个阶段都有相对应的钩子, 开发者可以根据自己的需求 在 钩子函数里做一些拓展.
/**
* plugin 是为了拓展webpack功能
* plugin都是new出来的, 所以它是个类 下面的代码是拦截emit钩子 在wp输出阶段手动添加一个txt文件
* api/compile-hooks
* ⚠️ class类上面的内容要全部注释掉 否则 报错
*/
class textWebpackPlugin {
constructor(options){
console.log(options);
}
// apply函数接收compile对象 触发plugin 必不可少
apply(compile){
compile.hooks.emit.tapAsync('textWebpackPlugin', (compilation, callback) => {
compilation.assets["output.txt"] = {
source: () => {
return "前女友为何那么香?";
},
size: () => {
return 10 * 1024; // 10kb
}
}
// callback 必须加
callback()
})
}
}
module.exports = textWebpackPlugin
