webpack源码之plugin机制

glumes 发布于2019-08-22 15:51 / 2921人阅读

摘要：调用的目的是为了注册你的逻辑指定一个绑定到自身的事件钩子。这个对象在启动时被一次性建立，并配置好所有可操作的设置，包括，和。对象代表了一次资源版本构建。一个对象表现了当前的模块资源编译生成资源变化的文件以及被跟踪依赖的状态信息。

引言

在上一篇文章Tapable中介绍了其概念和一些原理用法,和这次讨论分析webpack plugin的关联很大。下面从实现一个插件入手。

demo插件

function FileListPlugin(options) {}

FileListPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    var filelist = "In this build:

";
    for (var filename in compilation.assets) {
      filelist += ("- "+ filename +"
");
    }
    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...

云服务器 GPU云服务器源码中文说明之 java安全机制源码 plugins Plugin

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93812.html

webpack源码之loader机制

摘要：用于对模块的源代码进行转换。甚至允许你直接在模块中文件和区别之前一篇文章中介绍了机制和今天研究的对象他们两者在一起极大的拓展了的功能。原理说明上面是源码中执行关键步骤递归的方式执行执行机流程似于中间件机制参考源码参考文档 loader概念 loader是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构。 loader 用于对模块的源代码进行转换。loa...

dmlllll 2019-08-22 16:03 评论0 收藏0
浅谈webpack之plugin，webpack-manifest-plugin源码解读

摘要：注册方法之后，当执行了当前的，那么挂载正在当前上的方法就会被执行。比如在开始编译之前，就能触发钩子，就用到了当前的。上面都是前置知识，下面通过解读一个源码来巩固下。先看一段简单的源码。，是众多的的一个，官网的解释是编译创建之后，执行插件。通过解读webpack-manifest-plugin，了解下plugin机制先简单说一下这个插件的功能，生成一份资源清单的json文件，如下 s...

william 2019-08-23 16:18 评论0 收藏0
webpack源码之运行流程

摘要：引言通过前面几张的铺垫下面开始分析源码核心流程大体上可以分为初始化编译输出三个阶段下面开始分析初始化这个阶段整体流程做了什么启动构建，读取与合并配置参数，加载，实例化。推荐源码之源码之机制源码之简介源码之机制参考源码引言通过前面几张的铺垫,下面开始分析webpack源码核心流程,大体上可以分为初始化,编译,输出三个阶段,下面开始分析初始化这个阶段整体流程做了什么? 启动构建，读...

kviccn 2019-08-22 16:04 评论0 收藏0
webpack源码之tapable

摘要：它的行为和的方法相似，用来注册一个处理函数监听器，来在信号事件发生时做一些事情他最终还是调用进行存储。而就全部取出来执行。总结上面这些知识是理解插件和运行原理的前置条件更多内容待下次分解参考源码版本说明参考链接引言去年3月的时候当时写了一篇webpack2-update之路,到今天webpack已经到了4.2,更新挺快的,功能也在不断的完善,webpack4特性之一就是零配置, w...

Keagan 2019-08-22 15:49 评论0 收藏0
webpack源码分析之四：plugin

摘要：流程划分纵观整个打包过程，可以流程划分为四块。核心类关系图功能实现模块通过将源码解析为树并拆分，以及直至基础模块。通过的依赖和切割文件构建出含有和包含关系的对象。通过模版完成主入口文件的写入，模版完成切割文件的写入。前言插件plugin,webpack重要的组成部分。它以事件流的方式让用户可以直接接触到webpack的整个编译过程。plugin在编译的关键地方触发对应的事件，极大的...

yhaolpz 2019-08-23 10:34 评论0 收藏0