webpack插件实现

2019-05-09

webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安装插件时,会被 webpack compiler 调用一次。apply 方法可以接收一个 webpack compiler 对象的引用,从而可以在回调函数中访问到 compiler 对象。一个webpack插件有以下特性

  1. 本质是一个构造函数
  2. 原型prototype实现了apply方法,可以通过参数注入compiler对象
  3. 可以在compiler的钩子里面获取compilation对象

compiler对象

compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置,包括 options,loader 和 plugin。当在 webpack 环境中应用一个插件时,插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。

compilation 对象

compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时,每当检测到一个文件变化,就会创建一个新的 compilation,从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调,以供插件做自定义处理时选择使用。

由此可见,如果开发者需要通过一个插件的方式完成一个自定义的编译工作的话,如果涉及到需要改变编译后的资源产物,必定离不开这个 compilation 对象。

推荐使用 hooks 来实现的,旧版本是用 Tapable.plugin 

一个简单的插件定义

class FileListPlugin {
  apply(compiler) {

    compiler.hooks.compilation.tap('Compilation', compilation => {
      // 通过compiler的钩子获取compilation对象
      compilation.hooks.optimize.tap('CompilationOptimize', () => {
        console.log('优化资源')
      })
    })

    compiler.hooks.done.tap('file list plugin', stats => {
      console.log('done');
    })
  }
}

module.exports = exports = FileListPlugin

webpack引入插件

const FileListPlugin = require('./plugin/FIleListPlugin')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  plugins: [
    new FileListPlugin()
  ]
}

 

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript webpack

评论

Loading...

最新评论

相关推荐

ts之类型谓词
在了解类型谓词之前,我们先来了解联合类型。 联合类型 日常开发中,我们会定义为一个支持多种类型的变量,比如一个变量可...
vscode自定义组件属性自动提示
在封装业务组件的时候,组件如果可以提供良好的属性提示,对开发的同事是一种很好的体验。 下面有两种方案可以实现属性文档提...
h5のvideo踩坑
video是h5新增的标签,可以通过 video 标签播放 ogg、mp4 、webm 等格式的视频。 🌽...
scroll-top-icon