如何自定义webpack中的loader、plugin

我是石灰

学习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