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 的编译器对象,compiler 对象会在启动 webpack 的时候被一次性的初始化,compiler 对象中包含了所有 webpack 可自定义操作的配置,例如 loader 的配置,plugin 的配置,entry 的配置等各种原始 webpack 配置等,在 webpack 插件中的自定义子编译流程中,我们肯定会用到 compiler 对象中的相关配置信息,我们相当于可以通过 compiler 对象拿到 webpack 的主环境所有的信息。

compilation 对象

这里首先需要了解一下什么是编译资源,编译资源是 webpack 通过配置生成的一份静态资源管理 Map(一切都在内存中保存),以 key-value 的形式描述一个 webpack 打包后的文件,编译资源就是这一个个 key-value 组成的 Map。而编译资源就是需要由 compilation 对象生成的。

compilation 实例继承于 compilercompilation 对象代表了一次单一的版本 webpack 构建和生成编译资源的过程。当运行 webpack 开发环境中间件时,每当检测到一个文件变化,一次新的编译将被创建,从而生成一组新的编译资源以及新的 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()
  ]
}


 

标签: javascript webpack

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论