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月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
53 0
|
3月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
56 0
|
2月前
|
缓存 前端开发 算法
Webpack 进阶:深入理解其工作原理与优化策略
Webpack 进阶:深入理解其工作原理与优化策略
44 2
|
3月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
26 0
|
4月前
|
自然语言处理 JavaScript 前端开发
webpack 的热更新是如何做到的?原理是什么?
webpack 的热更新是如何做到的?原理是什么?
38 0
|
4月前
|
前端开发 JavaScript 中间件
React Proxy 详细流程与配置方式(webpack、setupProxy.js、package.json)
React Proxy 详细流程与配置方式(webpack、setupProxy.js、package.json)
60 0
|
4月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
60 0
|
4月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
34 0
|
4月前
|
存储 缓存 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
43 1
|
4月前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
32 1