资讯专栏INFORMATION COLUMN

webpack源码分析(一)-流程分析

codecraft / 555人阅读

摘要:先上一张流程图一般打包文件是通过调用这实际上等同于通过调用源码如下将用户本地的配置文件拼接上内置的参数初始化对象编辑器对象,包含所有主环境相关内容注册插件和用户配置的插件触发和上注册的事件注册内置插件源码如下注册触发钩子触发钩子触发钩子

先上一张流程图

一般webpack打包文件是通过cli调用

</>复制代码

  1. webpack.js --config=webpack.build.js

这实际上等同于通过node调用

</>复制代码

  1. const Webpack = require("./node_modules/webpack");
  2. const config = require("./config1.js");
  3. const compiler = Webpack(config);
  4. compiler.run();

Webpack(config)源码如下:

</>复制代码

  1. const webpack = (options, callback) => {
  2. //将用户本地的配置文件拼接上webpack内置的参数
  3. options = new WebpackOptionsDefaulter().process(options);
  4. //初始化compiler对象(webpack编辑器对象,包含所有webpack主环境相关内容)
  5. compiler = new Compiler(options.context);
  6. compiler.options = options;
  7. //注册NodeEnvironmentPlugin插件和用户配置的插件
  8. new NodeEnvironmentPlugin().apply(compiler);
  9. if (options.plugins && Array.isArray(options.plugins)) {
  10. for (const plugin of options.plugins) {
  11. plugin.apply(compiler);
  12. }
  13. }
  14. //触发environment和afterEnvironment上注册的事件
  15. compiler.hooks.environment.call();
  16. compiler.hooks.afterEnvironment.call();
  17. //注册webpack内置插件,源码如下
  18. compiler.options = new WebpackOptionsApply().process(options, compiler);
  19. return compiler;
  20. })
  21. class WebpackOptionsApply extends OptionsApply {
  22. process(options, compiler) {
  23. //注册EntryOptionPlugin
  24. new EntryOptionPlugin().apply(compiler);
  25. //触发entryOption钩子
  26. var a = compiler.hooks.entryOption.call(options.context, options.entry);
  27. //触发afterPlugins钩子
  28. compiler.hooks.afterPlugins.call(compiler);
  29. //触发afterResolvers钩子
  30. compiler.hooks.afterResolvers.call(compiler);
  31. }
  32. }

主要是初始化compiler对象和注册插件,下面介绍下EntryOptionPlugin插件

</>复制代码

  1. EntryOptionPlugin.apply方法
  2. apply(compiler) {
  3. //将回调函数注册到hooks.entryOption上
  4. //上文调用compiler.hooks.entryOption.call(options.context, options.entry)时触发
  5. compiler.hooks.entryOption.tap("EntryOptionPlugin", (context, entry) => {
  6. //取出entry文件入口配置,判断是否数组,调用对应的插件
  7. for (const name of Object.keys(entry)) {
  8. itemToPlugin(context, entry[name], name).apply(compiler);
  9. }
  10. }
  11. }
  12. const itemToPlugin = (context, item, name) => {
  13. if (Array.isArray(item)) {
  14. return new MultiEntryPlugin(context, item, name);
  15. }
  16. return new SingleEntryPlugin(context, item, name);
  17. }
  18. //本文介绍entry[name]为字符串的情况,调用new SingleEntryPlugin().apply方法,源码如下
  19. apply(compiler) {
  20. //在compilation钩子上注册回调,compilation.call时触发
  21. compiler.hooks.compilation.tap(
  22. "SingleEntryPlugin",
  23. (compilation, { normalModuleFactory }) => {
  24. //设置SingleEntryDependency使用normalModuleFactory创建Module
  25. compilation.dependencyFactories.set(
  26. SingleEntryDependency,
  27. normalModuleFactory
  28. );
  29. }
  30. );
  31. compiler.hooks.make.tapAsync(
  32. "SingleEntryPlugin",
  33. (compilation, callback) => {
  34. const { entry, name, context } = this;
  35. const dep = SingleEntryPlugin.createDependency(entry, name);
  36. compilation.addEntry(context, dep, name, callback);
  37. }
  38. );
  39. }

经过上一步的分析可以对webpack的插件机制有一定的了解,插件主要是挂载一些回调函数在compiler的生命周期上,当执行到该阶段时触发(事件的发布订阅,继承自tapable)。
compiler的生命周期可参考:webpack hooks,下面再看下compiler.run()方法

</>复制代码

  1. run(callback) {
  2. this.compile(onCompiled);
  3. }
  4. compile(callback) {
  5. //初始化compilation,compilation对象代表了一次单一的版本构建和生成资源过程
  6. const compilation = this.newCompilation(params);
  7. // 触发注册在make上的事件函数,
  8. this.hooks.make.callAsync(compilation, err => {
  9. //make上注册的事件执行完毕后触发回调,源码后面给出
  10. }
  11. }
  12. //触发上文提到的SingleEntryPlugin注册事件
  13. compiler.hooks.make.tapAsync(
  14. "SingleEntryPlugin",
  15. (compilation, callback) => {
  16. const { entry, name, context } = this;
  17. // 入口文件的依赖对象,
  18. const dep = SingleEntryPlugin.createDependency(entry, name);
  19. compilation.addEntry(context, dep, name, callback);
  20. }
  21. );
  22. addEntry(context, entry, name, callback) {
  23. this._addModuleChain(context, dep, ...)
  24. }
  25. _addModuleChain(context, dependency, onModule, callback) {
  26. //获取dependency
  27. const Dep = /** @type {DepConstructor} */ (dependency.constructor);
  28. //获取moduleFactory,根据上文的介绍此处是normalModuleFactory
  29. const moduleFactory = this.dependencyFactories.get(Dep);
  30. //获取module
  31. moduleFactory.create((err, module) => {
  32. dependency.module = module;
  33. this.buildModule(module, false, null, null, err => {
  34. //初始化moudle后生成ast对象,计算依赖,后面介绍
  35. })
  36. }
  37. //获取module的实现
  38. //normalModuleFactory.create
  39. create(data, callback) {
  40. // 获取在constructor中注册的factory方法
  41. const factory = this.hooks.factory.call(null);
  42. factory(result, (err, module) => {})
  43. }
  44. class NormalModuleFactory extends Tapable {
  45. constructor(context, resolverFactory, options) {
  46. this.hooks.factory.tap("NormalModuleFactory", () => (result, callback) => {
  47. //返回初始的module对象
  48. callback(null, {
  49. context: context,
  50. request: loaders
  51. .map(loaderToIdent)
  52. .concat([resource])
  53. .join("!"),
  54. dependencies: data.dependencies,
  55. ...
  56. });
  57. }
  58. }
  59. }

buildModule回调

</>复制代码

  1. this.buildModule(module, false, null, null, err => {
  2. // 根据js代码获取ast语法树对象
  3. ast = acorn.parse(code, parserOptions);
  4. // 根据ast加载模块的依赖
  5. this.prewalkStatements(ast.body);
  6. this.walkStatements(ast.body);

make主要是以entry为入口,生成一个modoule对象,其中的关键是根据js代码生成ast语法树对象,同时分析语法树加载需要使用到的依赖(dependency),如果存在import依赖,就会生成新的modoule,知道所有依赖加在完毕,下图是部分dependency示例

make阶段完成之后会进入seal阶段

</>复制代码

  1. this.hooks.make.callAsync(compilation, err => {
  2. compilation.seal(err => {})
  3. })
  4. seal() {
  5. for (const preparedEntrypoint of this._preparedEntrypoints) {
  6. const module = preparedEntrypoint.module;
  7. const name = preparedEntrypoint.name;
  8. const chunk = this.addChunk(name);
  9. chunk.entryModule = module;
  10. }
  11. this.createChunkAssets();
  12. }
  13. createChunkAssets(){
  14. const manifest = template.getRenderManifest({
  15. chunk,
  16. hash: this.hash,
  17. fullHash: this.fullHash,
  18. outputOptions,
  19. moduleTemplates: this.moduleTemplates,
  20. dependencyTemplates: this.dependencyTemplates
  21. }); // [{ render(), filenameTemplate, pathOptions, identifier, hash }]
  22. for (const fileManifest of manifest) {
  23. source = fileManifest.render();
  24. }
  25. }

compile结束后调用compiler.emitAssets

</>复制代码

  1. emitAssets() {
  2. const targetPath = this.outputFileSystem.join(
  3. outputPath,
  4. targetFile
  5. );
  6. let content = source.source();
  7. //this.writeFile = fs.writeFile.bind(fs);
  8. this.outputFileSystem.writeFile(targetPath, content, callback);
  9. }

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

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

相关文章

  • webpack源码之运行流程

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

    kviccn 评论0 收藏0
  • Webpack 源码(二)—— 如何阅读源码

    摘要:正所谓四两拨千斤,找对要分析的对象以及它的关系网,就找到了正确的分析源码的方法下面的是我的公众号二维码图片,欢迎关注。 1、如何调试阅读源码 如果想要了解 Webpack 的流程,只要阅读 @七珏 细说 webpack 之流程篇 所述的内容就够了,讲解地比较全面了;本文就不对 Webpack 流程再做重复的描述,而是从另外一个角度补充分析 Webpack 源码; Webpack 中最为...

    wing324 评论0 收藏0
  • 用十分之的构建时间做场页面静态资源依赖分析

    摘要:不直接使用的原因很简单首先构建一次实在太慢了,特别是有几十个页面存在的情况下,另一个原因是我只是想拿到资源依赖,我根本不想对整个前端进行一次构建,也不想生成任何。这就达到了本文题目中目的,用十分之一的构建时间做一场页面静态资源依赖分析。原文链接 作者:梯田 前言: 所谓【静态资源依赖分析】,指的是可以通过分析页面资源后,可以以 json 数据或者图表的方式拿到页面资源间的依赖关系。 比如 c...

    B0B0 评论0 收藏0
  • webpack源码分析之四:plugin

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

    yhaolpz 评论0 收藏0

发表评论

0条评论

codecraft

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<