webpack--自定义plugin

steady
119 阅读2分钟
  • 上一篇我们讲了自定义loader，这一篇我们来讲如何自定义plugin 我们还是仿照其他plugin怎么配置的，我们先配置上，然后看缺什么，我们加上什么

image.png

  • 就是在plugins里面new 一个自己命名的插件嘛，没啥，等等要new一个，哦哦，那我这个文件肯定是一个类，然后我们根据配置的plugin区创建一个文件用来编写plugin

image.png

  • 写到这里我们不知道怎么写了，该怎么写呀，这个时候我们去看一下官网，官网给我们介绍了，plugin的组成和一个例子，这里我们看一下

image.png

  • 注意一下，他这里说的组成，我们看到了要有一个apply的方法，也看到可以是个函数，嘿嘿，那我们这里就知道了，函数，类都可以，那么我们这里就先用类来学习一下，那我直接先把他的例子拿到我本地来运行一下

carbon.png

image.png

  • 原文链接：blog.csdn.net/weixin_4261…

  • 主要是理解compiler和compilation这两个对象，首先他们的创建时期不同，就代表他们时候类似于vue的生命周期，上图所示的代码是打包之后生成一个1.md的文件，compiler和compilation他们这两个对象有非常多钩子，这里我就写一个增加资源，和更新资源来入手，上述代码就是增加资源.通过emitAssets来生成一个新资源，并且第二个参数不能是资源串，必须是用webpack-source里面的RawSource转换成原代码所需要的格式。下面我来写一个更新资源的插件

image.png

  • 上面的注释写的也差不多了，主要是就理解什么周期做什么事情，然后再通过compilation对象上面的一个更新资源，修改资源，删除资源的一些方法进行更新，主要是注意要通过webpack-source来转换一下
  • 自定义plugin有很多的钩子函数还有compliation对象上面的方法，这些都是要多去看，大概之后有哪些，需要的时候再去翻看文档
avatar
文章
阅读
粉丝