如何开发webpack插件

guhy fighting

已于 2022-08-02 13:45:39 修改

阅读量1.6k

点赞数

分类专栏：前端问题总结文章标签： webpack javascript 前端

于 2022-07-21 19:46:49 首次发布

本文链接：https://blog.csdn.net/u013994400/article/details/125919563

版权

本文介绍了如何开发webpack插件，重点讲解了Compiler和Compilation的区别，以及插件生命周期中修改源码的注意事项。通过实例展示了在emit钩子中删除打包文件注释的操作，提供了一个基础的webpack插件开发流程。

摘要由CSDN通过智能技术生成

webpack是我们平时工作中必不可少的工具，难免有时候需要对webpack编译的代码进行个性化处理操作
Compiler包含 webpack 环境的所有配置信息Compilation包含整个编译过程中所有环节对应的方法
Compiler 代表着 webpack 从启动到关闭的整个生命周期，而 Compilation 只代表一次编译，而修改源码的时机正好需要在编译的过程中修改
插件提供了丰富的生命周期，在修改源码过程中也要特别注意插件的生命周期带来的影响，比如上述在 optimizeChunkAssets 阶段，这个阶段拿到的 chunk 资源已经完成各种 Loader 的处理，这个时候如果新增源码内容是 ES6，将不会再被转化。
目标：用来删除打包文件 (dist/*.js) 的注释
webpack 要求插件，必须是一个函数或者是一个包含 apply 方法的对象
emit 钩子：是 webpack 即将往输出目录输出时执行的钩子函数
第一步：在 webpack.config.js 里面定义插件并加载插件

// 定义插件：MyPlugin
class MyPlugin {
   
    // apply()在webpack启动过程中自动被调用，它接收一个compiler对象
    // 该对象包含此次构建过程中所有的配置信息，我们也是通过该对象注册构子函数
   apply (compiler) {
   
      // 通过compiler的hooks属性访问到emit钩子，通过tap方法注册一个钩子函数
      // tap()接收2该参数，1: 插件名称；2:挂载到钩子上的函数
      compiler.hooks.emit.tap('myPlugin', compilation => {
   
         // compilation===>可以理解为此次打包的上下文
         for (const name in compilation.assets) {
   
             console.log(name) // dis文件下所有文件名称
             console.log(compilation.assets[name].source())  //  dis文件下所有文件内容
             // 只针对js文件进行处理，去调注释
             if (name.endswith('.js')) {
   
                 const contents