随笔

Hello Webpack Plugin

最近一段时间一直想看下的,结果项目忙一直没时间,所以就一直耽搁了,趁着有点时间试了下写个插件。

本来没打算写的,可是现在前端真的太卷了,像写插件这种活说个不好听的看看文档,看看 Github 最多一天时间就能干的事,某些人非要拿来面试中问,光了解流程和理念还不行,还得要你写过,还得要你知道用哪个 API,最后还要你看过源码,实在是搞不懂这些人为什么要打破砂锅问到底,问这些简单检索下就能做的事情,完全丢掉了工程师的本质。

webpack 的插件基于 hook 体系,也就是将你的回调注册上去,webpack 会在相应的时机调用,比如我需要在 build 后附加一个输出,那就需要在 processAssets 这个 hook 上注册一个回调。

以下代码将会在处理完的文件后附加;console.log('write')

compilation.hooks.processAssets.tap({
      name: 'HelloWebpackPlugin',
      stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
    }, () => {
      const file = compilation.getAsset('index.min.js');
      compilation.updateAsset(
        'index.min.js',
        new sources.RawSource(file.source.source()+";console.log('write')")
      );
    }
);

因为需要修改文件,所以这里用的是 tab 同步,如果只是输出某些信息,可以用异步 tapAsync。

本文链接:https://note.lilonghe.net//post/hello-webpack-plugin.html

-- EOF --