江苏龙网

  1. 主页 > 生活百科 > >

揭秘webpack插件工作流程和原理

webpack插件


揭秘webpack插件工作流程和原理

文章插图
 
作者：frank
转发链接：https://mp.weixin.qq.com/s/LI-SkBoPA94Ply6Qes92PA
前言通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力 。本文将尝试探索 webpack 插件的工作流程，进而去揭秘它的工作原理 。同时需要你对webpack底层和构建流程的一些东西有一定的了解 。
想要了解 webpack 的插件的机制，需要弄明白以下几个知识点：
  1. 一个简单的插件的构成
  2. webpack构建流程
  3. Tapable是如何把各个插件串联到一起的
  4. compiler以及compilation对象的使用以及它们对应的事件钩子 。
插件基本结构plugins是可以用自身原型方法Apply来实例化的对象 。apply只在安装插件被Webpack compiler执行一次 。apply方法传入一个webpck compiler的引用，来访问编译器回调 。
一个简单的插件结构：class HelloPlugin{  // 在构造函数中获取用户给该插件传入的配置  constructor(options){  }  // Webpack 会调用 HelloPlugin 实例的 apply 方法给插件实例传入 compiler 对象  apply(compiler) {    // 在emit阶段插入钩子函数，用于特定时机处理额外的逻辑；    compiler.hooks.emit.tap('HelloPlugin', (compilation) => {      // 在功能流程完成后可以调用 webpack 提供的回调函数；    });    // 如果事件是异步的，会带两个参数，第二个参数为回调函数，在插件处理完任务时需要调用回调函数通知webpack，才会进入下一个处理流程 。    compiler.plugin('emit',function(compilation, callback) {      // 支持处理逻辑      // 处理完毕后执行 callback 以通知 Webpack       // 如果不执行 callback，运行流程将会一直卡在这不往下执行       callback();    });  }}module.exports = HelloPlugin;安装插件时, 只需要将它的一个实例放到Webpack config plugins 数组里面:
const HelloPlugin = require('./hello-plugin.js');var webpackConfig = {  plugins: [    new HelloPlugin({options: true})  ]};先来分析一下webpack Plugin的工作原理
  1. 读取配置的过程中会先执行 new HelloPlugin(options) 初始化一个 HelloPlugin 获得其实例 。
  2. 初始化 compiler 对象后调用 HelloPlugin.apply(compiler) 给插件实例传入 compiler 对象 。
  3. 插件实例在获取到 compiler 对象后，就可以通过compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件 。并且可以通过 compiler 对象去操作 Webpack 。
webapck 构建流程在编写插件之前，还需要了解一下Webpack的构建流程，以便在合适的时机插入合适的插件逻辑 。
Webpack的基本构建流程如下：
  1. 校验配置文件 ：读取命令行传入或者webpack.config.js文件，初始化本次构建的配置参数
  2. 生成Compiler对象：执行配置文件中的插件实例化语句new MyWebpackPlugin()，为webpack事件流挂上自定义hooks
  3. 进入entryOption阶段：webpack开始读取配置的Entries，递归遍历所有的入口文件
  4. run/watch：如果运行在watch模式则执行watch方法，否则执行run方法
  5. compilation：创建Compilation对象回调compilation相关钩子，依次进入每一个入口文件(entry)，使用loader对文件进行编译 。通过compilation我可以可以读取到module的resource（资源路径）、loaders（使用的loader）等信息 。再将编译好的文件内容使用acorn解析生成AST静态语法树 。然后递归、重复的执行这个过程，所有模块和和依赖分析完成后，执行 compilation 的 seal 方法对每个 chunk 进行整理、优化、封装__webpack_require__来模拟模块化操作.
  6. emit：所有文件的编译及转化都已经完成，包含了最终输出的资源，我们可以在传入事件回调的compilation.assets上拿到所需数据，其中包括即将输出的资源、代码块Chunk等等信息 。
// 修改或添加资源compilation.assets['new-file.js'] = {  source() {    return 'var a=1';  },  size() {    return this.source().length;  }};


推荐阅读


上一篇：了不起的 Deno 实战教程

下一篇：Python自动化 如何优雅的操作数据库？