编写一个webpack plugin(基础篇)

创建插件

webpack插件由以下组成

• 一个具名javaScript函数
• 在插件函数的 prototype 上定义一个 apply 方法。
• 指定一个绑定到 webpack 自身的事件钩子。
• 处理 webpack 内部实例的特定数据。
• 功能完成后调用 webpack 提供的回调。

// 一个js具名函数
function HelloWorldPlugin() {

}

//再函数的protoyupe上定义一个apply方法
HelloWorldPlugin.prototype.apply = function (compiler) {

    //指定一个挂载到webpack自身的事件钩子
    compiler.hooks.emit.tapAsync(
        'HelloWorldPlugin',
        (compilation, callback) => {
          console.log('This is an example plugin!');
          console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);
  
          // 使用webpack提供的插件API操作构建
          compilation.addModule(/* ... */);
        
          callback();
        }
      );
}

module.exports = HelloWorldPlugin;

Compiler 和 Compilation

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

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

插件的不同类型

demo.png

• Bail Hooks

  • 在这些 hooks 类型中，一个接一个地调用每个插件，并且 callback 会传入特定的 args。如果任何插件返回任何非 undefined 值，则由 hook 返回该值，并且不再继续调用插件 callback。许多有用的事件，如 optimizeChunks, optimizeChunkModules 都是 SyncBailHooks 类型。

• Waterfall Hooks

  • 在这些 hooks 类型中，一个接一个地调用每个插件，并且会使用前一个插件的返回值，作为后一个插件的参数。必须考虑插件的执行顺序。 它必须接收来自先前执行插件的参数。第一个插件的值是 init。因此，waterfall hooks 必须提供至少一个参数。这种插件模式用于 Tapable 实例，而这些实例与 ModuleTemplate, ChunkTemplate 等 webpack 模板相互关联

• Async Series Hook

  • 调用插件处理函数，传入所有参数，并使用签名 (err?: Error) -> void 调用回调函数。处理函数按照注册顺序进行调用。所有处理函数都被调用之后会调用 callback。 这种插件模式常用于 emit, run 等事件。

• Async waterfall

  • 调用插件处理函数，传入当前值作为参数，并使用签名 (err?: Error) -> void 调用回调函数。在调用处理函数中的 nextValue，是下一个处理函数的当前值。第一个处理函数的当前值是 init。所有处理函数都被调用之后，会调用 callback，并且传入最后一个值。如果任何处理函数向 err 方法传递一个值，则会调用 callback，并且将这个错误传入，然后不再调用处理函数。 这种插件模式常用于 before-resolve, after-resolve 等事件。

Compiler 源码

Compilation 源码

tapAsync

在我们使用 tapAsync 方法 tap 插件时，我们需要调用 callback，此 callback 将作为最后一个参数传入函数。

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('HelloAsyncPlugin', (compilation, callback) => {
      // 做一些异步的事情……
      setTimeout(function() {
        console.log('Done with async work...');
        callback();
      }, 1000);
    });
  }
}

module.exports = HelloAsyncPlugin;

tapPromise

在我们使用 tapPromise 方法 tap 插件时，我们需要返回一个 promise，此 promise 将在我们的异步任务完成时 resolve。

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapPromise('HelloAsyncPlugin', compilation => {
      // 返回一个 Promise，在我们的异步任务完成时 resolve……
      return new Promise((resolve, reject) => {
        setTimeout(function() {
          console.log('异步工作完成……');
          resolve();
        }, 1000);
      });
    });
  }
}

module.exports = HelloAsyncPlugin;

过程

webpack在启动之后，读取到传入的配置参数,先初始化compiler对象并把配置参数注入到其中,

遍历配置文件中的plugin列表通过apply方法并将compiler对象传入。

这样我们就可以在插件实例的apply方法中通过compiler对象来监听webpack生命周期中广播出来的事件。

在事件中，我们也可以通过compiler对象来操作webpack的输出。

源码地址

官方demo

class FileListPlugin {
  apply(compiler) {
    // emit 是异步 hook，使用 tapAsync 触及它，还可以使用 tapPromise/tap(同步)
    compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback) => {
      // 在生成文件中，创建一个头部字符串：
      var filelist = 'In this build:\n\n';

      // 遍历所有编译过的资源文件，
      // 对于每个文件名称，都添加一行内容。
      for (var filename in compilation.assets) {
        filelist += '- ' + filename + '\n';
      }

      // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
      compilation.assets['filelist.md'] = {
        source: function() {
          return filelist;
        },
        size: function() {
          return filelist.length;
        }
      };

      callback();
    });
  }
}

module.exports = FileListPlugin;

灵魂拷问: 那么compilation里除了assets还有什么呢? 我们想要获取打包后的具体信息 例如:项目代码具体本分成多少个chunk,每个chunk下又有几个module 该怎么办?

官方另一个demo (血坑_!!_!!~!)

class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // Explore each chunk (build output):
      compilation.chunks.forEach(chunk => {
        // Explore each module within the chunk (built inputs):
        chunk.modules.forEach(module => {
          // Explore each source file path that was included into the module:
          module.fileDependencies.forEach(filepath => {
            // we've learned a lot about the source structure now...
          });
        });

        // Explore each asset filename generated by the chunk:
        chunk.files.forEach(filename => {
          // Get the asset source for each file generated by the chunk:
          var source = compilation.assets[filename].source();
        });
      });

      callback();
    });
  }
}
module.exports = MyPlugin;

心路历程

c -----------> Feel happy

o -----------> coding......

d -----------> Excuse me ?

i -----------> coding......

n -----------> Fuck!

g -----------> coding......

. -----------> Fuck~?

. -----------> coding......

. -----------> @!,#%.&(!.@#$%^^&()

(少儿不宜,请勿模仿)

错误原因: compilation.chunks === true; compilation.chunks.module === false;

compilation里有chunks,但是chunks里没有modules属性,只有 _modules. _modules里把module做了多种分类,无法获取有效信息

证据;

正确姿势:

compilation.getStats().toJson();

// chunks = compilation.getStats().toJson().chunks;

[ { id: 0,
   //chunk id
    rendered: true,
    initial: false,
    //require.ensure 产生的 chunk，非 initial
    //initial 表示是否在页面初始化就需要加载的模块，而不是按需加载的模块
    entry: false,
    //是否含有 Webpack 的 runtime 环境，通过 CommonChunkPlugin 处理后，runtime 环境被提到最高层级的 chunk
    recorded: undefined,
    extraAsync: false,
    size: 296855,
    //chunk 大小、比特
    names: [],
    //require.ensure 不是通过 Webpack 配置的，所以 chunk 的 names 是空
    files: [ '0.bundle.js' ],
    //该 chunk 产生的输出文件，即输出到特定文件路径下的文件名称
    hash: '42fbfbea594ba593e76a',
    //chunk 的 hash，即 chunkHash
    parents: [ 2 ],
    //父级 chunk 的 id 值
    origins: [ [Object] ] 
    //该 chunk 是如何产生的
    },
  { id: 1,
    rendered: true,
    initial: false,
    entry: false,
    recorded: undefined,
    extraAsync: false,
    size: 297181,
    names: [],
    files: [ '1.bundle.js' ],
    hash: '456d05301e4adca16986',
    parents: [ 2 ],
    origins: [ [Object] ] }
    ```
     chunk -- origins  -- 描述了某一个 chunk 是如何产生的：
     ```
     {
  "loc": "", // Lines of code that generated this chunk
  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
  "moduleId": 0, // The ID of the module
  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
  "moduleName": "./lib/index.web.js", // Relative path to the module
  "name": "main", // The name of the chunk
  "reasons": [
    // A list of the same `reasons` found in module objects
  ]
}







//  assets = compilation.getStats().toJson().assets;

[ {
  "chunkNames": [], 
  // The chunks this asset contains
  //这个输出资源包含的 chunks 名称。对于图片的 require 或者 require.ensure 动态产生的 chunk 是不会有 chunkNames 的，但是在 entry 中配置的都是会有的
  "chunks": [ 10, 6 ],
   // The chunk IDs this asset contains
   //这个输出资源包含的 chunk的ID。通过 require.ensure 产生的 chunk 或者 entry 配置的文件都会有该 chunks 数组，require 图片不会有
  "emitted": true,
   // Indicates whether or not the asset made it to the `output` directory
   //使用这个属性标识 assets 是否应该输出到 output 文件夹
  "name": "10.web.js", 
  // The `output` filename
  //表示输出的文件名
  "size": 1058 ,
  // The size of the file in bytes
  //输出的这个资源的文件大小
  modules: []
  // 该chunk下包含的module
}
  { name: '1.bundle.js',
    size: 299469,
    chunks: [ 1, 3 ],
    chunkNames: [],
    emitted: undefined,
    isOverSizeLimit: undefined },
  { name: 'bundle.js',
    
    size: 968,
    
    chunks: [ 2, 3 ],
    
    chunkNames: [ 'main' ],
    
    emitted: undefined,
    
    isOverSizeLimit: undefined },
  { name: 'vendor.bundle.js',
    size: 5562,
    chunks: [ 3 ],
    chunkNames: [ 'vendor' ],
    emitted: undefined,
    isOverSizeLimit: undefined }]





//  modules = compilation.getStats().toJson().modules;


{ id: 10,
//该模块的 id 和 `module.id` 一样
identifier: 'C:\\Users\\Administrator\\Desktop\\webpack-chunkfilename\\node_
odules\\html-loader\\index.js!C:\\Users\\Administrator\\Desktop\\webpack-chunkf
lename\\src\\Components\\Header.html',
//Webpack 内部使用这个唯一的 ID 来表示这个模块
name: './src/Components/Header.html',
//模块名称，已经转化为相对于根目录的路径
index: 10,
index2: 8,
size: 62,
cacheable: true,
//表示这个模块是否可以缓存，调用 this.cacheable()
built: true,
//表示这个模块通过 Loader、Parsing、Code Generation 阶段
optional: false,
//所以对该模块的加载全部通过 try..catch 包裹
prefetched: false,
//表示该模块是否是预加载的。即在第一个 import、require 调用之前就开始解析和打包该模块https://webpack.js.org/plugins/prefetch-plugin/
chunks: [ 0 ],
//该模块在那个 chunk 中出现
assets: [],
//该模块包含的所有的资源文件集合
issuer: 'C:\\Users\\Administrator\\Desktop\\webpack-chunkfilename\\node_modu
es\\eslint-loader\\index.js!C:\\Users\\Administrator\\Desktop\\webpack-chunkfil
name\\src\\Components\\Header.js',
//是谁开始本模块的调用的，即模块调用发起者
issuerId: 1,
//发起者的 moduleid
issuerName: './src/Components/Header.js',
//发起者相对于根目录的路径
profile: undefined,
failed: false,
//在解析或者处理该模块的时候是否失败
errors: 0,
//在解析或者处理该模块的是否出现的错误数量
warnings: 0,
//在解析或者处理该模块的是否出现的警告数量
reasons: [ [Object] ],
usedExports: [ 'default' ],
providedExports: null,
depth: 2,
source: 'module.exports = "<header class=\\"header\\">{{text}}</header>";' }
//source 是模块内容，但是已经变成了字符串了

通过广播自定义事件来实现组件之间相互通讯

自定义webpack事件流大概分为4步:

• 引入Tapable并找到你想用的hook，(同步hook or 异步hook)

const { SyncHook } = require("tapable");

• 实例化Tapable中你所需要的hook并挂载在compiler或compilation上

compiler.hooks.myHook = new SyncHook(['data'])

• 在你所需要广播事件的时机执行call方法并传入数据

compiler.hooks.environment.tap(pluginName, () => {
       //广播自定义事件
       compiler.hooks.myHook.call("It's my plugin.")
});

• 在你需要监听事件的位置tap监听

compiler.hooks.myHook.tap('Listen4Myplugin', (data) => {
    console.log('@Listen4Myplugin', data)
})

本文只对webpack plugin做基础入门级的介绍, 具体细节以及api变动以官方文档或github为准