webpack原理篇(五十七):webpack流程:文件生成

简介: webpack原理篇(五十七):webpack流程:文件生成

说明

玩转 webpack 学习笔记



分析 seal 阶段怎么生成文件

我们可以打开 my-project\node_modules\webpack\lib\Compilation.js 找到 seal 方法

/**
 * @param {Callback} callback signals when the seal method is finishes
 * @returns {void}
 */
seal(callback) {
  this.hooks.seal.call();
  while (
    this.hooks.optimizeDependenciesBasic.call(this.modules) ||
    this.hooks.optimizeDependencies.call(this.modules) ||
    this.hooks.optimizeDependenciesAdvanced.call(this.modules)
  ) {
    /* empty */
  }
  this.hooks.afterOptimizeDependencies.call(this.modules);
  this.hooks.beforeChunks.call();
  for (const preparedEntrypoint of this._preparedEntrypoints) {
    const module = preparedEntrypoint.module;
    const name = preparedEntrypoint.name;
    const chunk = this.addChunk(name);
    const entrypoint = new Entrypoint(name);
    entrypoint.setRuntimeChunk(chunk);
    entrypoint.addOrigin(null, name, preparedEntrypoint.request);
    this.namedChunkGroups.set(name, entrypoint);
    this.entrypoints.set(name, entrypoint);
    this.chunkGroups.push(entrypoint);
    GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk);
    GraphHelpers.connectChunkAndModule(chunk, module);
    chunk.entryModule = module;
    chunk.name = name;
    this.assignDepth(module);
  }
  buildChunkGraph(
    this,
    /** @type {Entrypoint[]} */ (this.chunkGroups.slice())
  );
  this.sortModules(this.modules);
  this.hooks.afterChunks.call(this.chunks);
  this.hooks.optimize.call();
  while (
    this.hooks.optimizeModulesBasic.call(this.modules) ||
    this.hooks.optimizeModules.call(this.modules) ||
    this.hooks.optimizeModulesAdvanced.call(this.modules)
  ) {
    /* empty */
  }
  this.hooks.afterOptimizeModules.call(this.modules);
  while (
    this.hooks.optimizeChunksBasic.call(this.chunks, this.chunkGroups) ||
    this.hooks.optimizeChunks.call(this.chunks, this.chunkGroups) ||
    this.hooks.optimizeChunksAdvanced.call(this.chunks, this.chunkGroups)
  ) {
    /* empty */
  }
  this.hooks.afterOptimizeChunks.call(this.chunks, this.chunkGroups);
  this.hooks.optimizeTree.callAsync(this.chunks, this.modules, err => {
    if (err) {
      return callback(err);
    }
    this.hooks.afterOptimizeTree.call(this.chunks, this.modules);
    while (
      this.hooks.optimizeChunkModulesBasic.call(this.chunks, this.modules) ||
      this.hooks.optimizeChunkModules.call(this.chunks, this.modules) ||
      this.hooks.optimizeChunkModulesAdvanced.call(this.chunks, this.modules)
    ) {
      /* empty */
    }
    this.hooks.afterOptimizeChunkModules.call(this.chunks, this.modules);
    const shouldRecord = this.hooks.shouldRecord.call() !== false;
    this.hooks.reviveModules.call(this.modules, this.records);
    this.hooks.optimizeModuleOrder.call(this.modules);
    this.hooks.advancedOptimizeModuleOrder.call(this.modules);
    this.hooks.beforeModuleIds.call(this.modules);
    this.hooks.moduleIds.call(this.modules);
    this.applyModuleIds();
    this.hooks.optimizeModuleIds.call(this.modules);
    this.hooks.afterOptimizeModuleIds.call(this.modules);
    this.sortItemsWithModuleIds();
    this.hooks.reviveChunks.call(this.chunks, this.records);
    this.hooks.optimizeChunkOrder.call(this.chunks);
    this.hooks.beforeChunkIds.call(this.chunks);
    this.applyChunkIds();
    this.hooks.optimizeChunkIds.call(this.chunks);
    this.hooks.afterOptimizeChunkIds.call(this.chunks);
    this.sortItemsWithChunkIds();
    if (shouldRecord) {
      this.hooks.recordModules.call(this.modules, this.records);
      this.hooks.recordChunks.call(this.chunks, this.records);
    }
    this.hooks.beforeHash.call();
    this.createHash();
    this.hooks.afterHash.call();
    if (shouldRecord) {
      this.hooks.recordHash.call(this.records);
    }
    this.hooks.beforeModuleAssets.call();
    this.createModuleAssets();
    if (this.hooks.shouldGenerateChunkAssets.call() !== false) {
      this.hooks.beforeChunkAssets.call();
      this.createChunkAssets();
    }
    this.hooks.additionalChunkAssets.call(this.chunks);
    this.summarizeDependencies();
    if (shouldRecord) {
      this.hooks.record.call(this, this.records);
    }
    this.hooks.additionalAssets.callAsync(err => {
      if (err) {
        return callback(err);
      }
      this.hooks.optimizeChunkAssets.callAsync(this.chunks, err => {
        if (err) {
          return callback(err);
        }
        this.hooks.afterOptimizeChunkAssets.call(this.chunks);
        this.hooks.optimizeAssets.callAsync(this.assets, err => {
          if (err) {
            return callback(err);
          }
          this.hooks.afterOptimizeAssets.call(this.assets);
          if (this.hooks.needAdditionalSeal.call()) {
            this.unseal();
            return this.seal(callback);
          }
          return this.hooks.afterSeal.callAsync(callback);
        });
      });
    });
  });
}


1f896c38258b4563b6a37283ae4f96f1.png


从上面代码可以看到里面做了很多优化工作,另外就是创建 hash

78c9f3501fc442fb93e53d8b1572e11b.png


然后进行内容的生成

48b0eecd6b4347f5abf4c01a34bd5bff.png

createModuleAssets 方法

3ba7cc9bb7ad409ca199fee5fa55bc7c.png


emitAsset 方法


16773ff3b8674e34874e08e1d0c2a8a9.png




最后 emit 到磁盘

my-project\node_modules\webpack\lib\Compiler.js

this.hooks.emit.callAsync(compilation, err => {
  if (err) return callback(err);
  outputPath = compilation.getPath(this.outputPath);
  this.outputFileSystem.mkdirp(outputPath, emitFiles);
});

1aeaaf04c97248a0a3517e4695943b13.png

目录
相关文章
|
2月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
2月前
|
监控 前端开发 JavaScript
Webpack 中 HMR 插件的工作原理
【10月更文挑战第23天】可以进一步深入探讨 HMR 工作原理的具体细节、不同场景下的应用案例,以及与其他相关技术的结合应用等方面的内容。通过全面、系统地了解 HMR 插件的工作原理,能够更好地利用这一功能,为项目的成功开发提供有力保障。同时,要不断关注技术的发展动态,以便及时掌握最新的 HMR 技术和最佳实践。
|
2月前
|
缓存 前端开发 JavaScript
Webpack 动态加载的原理
【10月更文挑战第23天】Webpack 动态加载通过巧妙的机制和策略,实现了模块的按需加载和高效运行,提升了应用程序的性能和用户体验。同时,它也为前端开发提供了更大的灵活性和可扩展性,适应了不断变化的业务需求和技术发展。
|
2月前
|
缓存 前端开发 JavaScript
webpack 原理
【10月更文挑战第23天】Webpack 原理是一个复杂但又非常重要的体系。它通过模块解析、依赖管理、加载器和插件的协作,实现了对各种模块的高效打包和处理,为现代前端项目的开发和部署提供了强大的支持。同时,通过代码分割、按需加载、热模块替换等功能,提升了应用程序的性能和用户体验。随着前端技术的不断发展,Webpack 也在不断演进和完善,以适应不断变化的需求和挑战。
|
3月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
3月前
|
JSON 前端开发 JavaScript
webpack如何支持多种类型的文件和转换需求
【10月更文挑战第13天】webpack如何支持多种类型的文件和转换需求
|
4月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
|
5月前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
273 1
|
5月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
58 0
|
7月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
67 3