江苏龙网

  1. 主页 > 生活百科 > >

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

webpack插件

apply方法中插入钩子的一般形式如下：
// compiler提供了compiler.hooks，可以根据这些不同的时刻去让插件做不同的事情 。compiler.hooks.阶段.tap函数('插件名称', (阶段回调参数) => {});compiler.run(callback)理解CompilationCompilation对象代表了一次资源版本构建 。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源 。一个 Compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息，简单来讲就是把本次打包编译的内容存到内存里 。Compilation 对象也提供了插件需要自定义功能的回调，以供插件做自定义处理时选择使用拓展 。
简单来说,Compilation的职责就是构建模块和Chunk，并利用插件优化构建过程 。
和 Compiler 用法相同，钩子类型不同，也可以在某些钩子上访问 tapAsync和 tapPromise 。
控制台输出console.log(compilation)

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

文章插图
 
通过 Compilation 也能读取到 Compiler 对象 。
源码2000多行，看不动了- -，有兴趣的可以自己看看 。https://github.com/webpack/webpack/blob/master/lib/Compilation.js
介绍几个常用的Compilation HooksbuildModule(SyncHook):在模块开始编译之前触发，可以用于修改模
succeedModule(SyncHook):在模块开始编译之前触发，可以用于修改模块
finishModules(AsyncSeriesHook):当所有模块都编译成功后被调用
seal(SyncHook):当一次compilation停止接收新模块时触发
optimizeDependencies(SyncBailHook):在依赖优化的开始执行
optimize(SyncHook):在优化阶段的开始执行
optimizeModules(SyncBailHook):在模块优化阶段开始时执行，插件可以在这个钩子里执行对模块的优化，回调参数：modules
optimizeChunks(SyncBailHook):在代码块优化阶段开始时执行，插件可以在这个钩子里执行对代码块的优化，回调参数：chunks
optimizeChunkAssets(AsyncSeriesHook):优化任何代码块资源，这些资源存放在compilation.assets 上 。一个 chunk 有一个 files 属性，它指向由一个chunk创建的所有文件 。任何额外的 chunk 资源都存放在 compilation.additionalChunkAssets 上 。回调参数：chunks
optimizeAssets(AsyncSeriesHook):优化所有存放在 compilation.assets的所有资源 。回调参数：assets |
Compiler 和 Compilation 的区别Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation只是代表了一次新的编译，只要文件有改动，compilation就会被重新创建 。
常用 API插件可以用来修改输出文件、增加输出文件、甚至可以提升 Webpack 性能、等等，总之插件通过调用Webpack 提供的 API 能完成很多事情 。由于 Webpack提供的 API 非常多，有很多 API 很少用的上，又加上篇幅有限，下面来介绍一些常用的 API 。
读取输出资源、代码块、模块及其依赖有些插件可能需要读取 Webpack 的处理结果，例如输出资源、代码块、模块及其依赖，以便做下一步处理 。在 emit 事件发生时，代表源文件的转换和组装已经完成，在这里可以读取到最终将输出的资源、代码块、模块及其依赖，并且可以修改输出资源的内容 。插件代码如下：
class Plugin {  apply(compiler) {    compiler.plugin('emit', function (compilation, callback) {      // compilation.chunks 存放所有代码块，是一个数组      compilation.chunks.forEach(function (chunk) {        // chunk 代表一个代码块        // 代码块由多个模块组成，通过 chunk.forEachModule 能读取组成代码块的每个模块        chunk.forEachModule(function (module) {          // module 代表一个模块          // module.fileDependencies 存放当前模块的所有依赖的文件路径，是一个数组          module.fileDependencies.forEach(function (filepath) {          });        });        // Webpack 会根据 Chunk 去生成输出的文件资源，每个 Chunk 都对应一个及其以上的输出文件        // 例如在 Chunk 中包含了 css 模块并且使用了 ExtractTextPlugin 时，        // 该 Chunk 就会生成 .js 和 .css 两个文件        chunk.files.forEach(function (filename) {          // compilation.assets 存放当前所有即将输出的资源          // 调用一个输出资源的 source() 方法能获取到输出资源的内容          let source = compilation.assets[filename].source();        });      });      // 这是一个异步事件，要记得调用 callback 通知 Webpack 本次事件监听处理结束 。      // 如果忘记了调用 callback，Webpack 将一直卡在这里而不会往后执行 。      callback();    })  }}


推荐阅读


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

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