弁言

在上一篇文章Tapable中引见了其观点和一些道理用法,和此次议论剖析webpack plugin的关联很大。下面从完成一个插件入手。

demo插件

function FileListPlugin(options) {}

FileListPlugin.prototype.apply = function(compiler) {
  compiler.plugin('emit', function(compilation, callback) {
    var filelist = 'In this build:\n\n';
    for (var filename in compilation.assets) {
      filelist += ('- '+ filename +'\n');
    }
    compilation.assets['filelist.md'] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

    callback();
  });
};

module.exports = FileListPlugin;

申明 demo例子参考了webpack的官方文档,运用这个简短的demo作为我们剖析的进口,一步一步来剖析。
起首我们写插件都是这类构造情势,只要如许webpack才剖析。而上面这个简短的插件的作用是将build后asset目次下的一切的文件遍历后掏出文件名,然后天生一个filelist.md文件。
原型上为何要有apply要领呢?由于在装置插件时，apply要领会被 webpack compiler 挪用一次。挪用的目标是为了注册你的逻辑,指定一个绑定到 webpack 本身的事宜钩子。

webpack的事宜钩子有许多以下所示,枚举几个比较主要经常使用的的,加深下印象

• compile 编译器最先编译
• compilation 编译器最先一个新的编译历程
• emit 在天生资本并输出到目次之前
• done 完成编译

检察更多事宜钩子
在上一篇文章中剖析谈到过compiler是继续自tapable,恰是由于它mix了Tapable 类，才具有注册和挪用插件功用,而实行plugin要领实在就相称hook.tap(tapOpt, options.fn)举行存储, 然后webpack在启动运转时期,抵达某个阶段,就会触发挪用响应的事宜。分外传入一个 callback 回调函数,只要在插件中操纵是异步的时刻才须要,同步操纵不须要传入和实行这个callback。
另有一点须要注重的是compiler和compilation区分?

compiler 对象代表了完全的 webpack 环境设置。这个对象在启动 webpack 时被一次性竖立，并设置好一切可操纵的设置，包含 options，loader 和 plugin。当在 webpack 环境中运用一个插件时，插件将收到此 compiler 对象的援用。能够运用它来访问 webpack 的主环境。

compilation 对象代表了一次资本版本构建。当运转 webpack 开辟环境中间件时，每当检测到一个文件变化，就会建立一个新的 compilation，从而天生一组新的编译资本。一个 compilation 对象表现了当前的模块资本、编译天生资本、变化的文件、以及被跟踪依靠的状况信息。compilation 对象也供应了许多症结机遇的回调，以供插件做自定义处置惩罚时挑选运用。

装置运用

const FileListPlugin = require('fileList');
module.exports = {
    entry: './src/main.js',
    output:{
        path: path.join(__dirname,'dist'), 
        filename: '[name].js'
    },
    plugins: [
        new FileListPlugin({options: true})
    ]
}

输出效果

demo完全链接

参考链接

https://doc.webpack-china.org…
https://doc.webpack-china.org…
https://webpack.js.org/contri…