webpack收集完依赖是怎么打包资源的呢?

入口compiler.js:

this.applyPluginsParallel("make", compilation, err => {
if(err) return callback(err);
compilation.finish();
compilation.seal(callback);
});

执行seal方法,createChunkAssets方法(compilation.js)
createChunkAssets方法的时候做如下判断:

if(chunk.hasRuntime()) {
source = this.mainTemplate.render(this.hash, chunk, this.moduleTemplate, this.dependencyTemplates);
} else {
source = this.chunkTemplate.render(chunk, this.moduleTemplate, this.dependencyTemplates);
}

根据是否是entrypoints,进行资源打包(chunk.js)。

上面的mainTemplate.render方法:

render(hash, chunk, moduleTemplate, dependencyTemplates) {
const buf = [];
buf.push(this.applyPluginsWaterfall("bootstrap", "", chunk, hash, moduleTemplate, dependencyTemplates));
buf.push(this.applyPluginsWaterfall("local-vars", "", chunk, hash));
buf.push("");
buf.push("// The require function");
buf.push(`function ${this.requireFn}(moduleId) {`);
buf.push(this.indent(this.applyPluginsWaterfall("require", "", chunk, hash)));
buf.push("}");
buf.push("");
buf.push(this.asString(this.applyPluginsWaterfall("require-extensions", "", chunk, hash)));
buf.push("");
buf.push(this.asString(this.applyPluginsWaterfall("startup", "", chunk, hash))); let source = this.applyPluginsWaterfall("render", new OriginalSource(this.prefix(buf, " \t") + "\n", `webpack/bootstrap ${hash}`), chunk, hash, moduleTemplate, dependencyTemplates);
if(chunk.hasEntryModule()) {
source = this.applyPluginsWaterfall("render-with-entry", source, chunk, hash);
}
if(!source) throw new Error("Compiler error: MainTemplate plugin 'render' should return something");
chunk.rendered = true;
return new ConcatSource(source, ";");
}

buf中保存了webpackBootstrap中的主体代码:

render钩子(MainTemplate.js)

 const source = new ConcatSource();
source.add("/******/ (function(modules) { // webpackBootstrap\n"); // 添加头部包裹体
source.add(new PrefixSource("/******/", bootstrapSource)); // 添加bootstrap主体
source.add("/******/ })\n"); // 结束
source.add("/***************************** *******************************************/\n");
source.add("/******/ (");
const modules = this.renderChunkModules(chunk, moduleTemplate, dependencyTemplates, "/******/ "); // 返回一个concatSource的一个实例,包含了需要打包的所有内容
source.add(this.applyPluginsWaterfall("modules", modules, chunk, hash, moduleTemplate, dependencyTemplates));
source.add(")");
return source; // 返回一个concatSource实例

主要做了两件事:
1.生成webpackBootstrap中的主体代码
2.添加所有的代码到concatSource

最后,执行compiler.run的回调函数 onCompiled(null, compilation)
执行 emitAssets方法

this.outputFileSystem.mkdirp(this.outputFileSystem.join(outputPath, dir), writeOut);// 创建dist目录
const targetPath = this.outputFileSystem.join(outputPath, targetFile);
const source = compilation.assets[file]; // createChunkAssets中有这样的处理this.assets[file] = source;
......
let content = source.source();
if(!Buffer.isBuffer(content)) {
content = new Buffer(content, "utf8");
}
......
this.outputFileSystem.writeFile(targetPath, content, callback);// 输出到本地文件系统

至此打包资源,然后就基本结束了。

webpack源码-打包资源输出到本地的更多相关文章

  1. RPMBUILD源码打包资源汇总(转)

    http://mattshma.github.io/2015/11/04/rpm%E6%89%93%E5%8C%85/ http://400053.blog.51cto.com/390053/7210 ...

  2. 从Webpack源码探究打包流程,萌新也能看懂~

    简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...

  3. .3-浅析webpack源码之预编译总览

    写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂. 既然是浅析,那么案例就不必太 ...

  4. .30-浅析webpack源码之doResolve事件流(1)

    这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...

  5. .17-浅析webpack源码之compile流程-入口函数run

    本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...

  6. .30-浅析webpack源码之doResolve事件流(2)

    这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...

  7. Spring源码分析——资源访问利器Resource之实现类分析

    今天来分析Spring的资源接口Resource的各个实现类.关于它的接口和抽象类,参见上一篇博文——Spring源码分析——资源访问利器Resource之接口和抽象类分析 一.文件系统资源 File ...

  8. maven源码打包

    1.打包时附加外部Jar包 <!--编译+外部 Jar打包-->          <plugin>            <artifactId>maven-co ...

  9. 使用 maven 自动将源码打包并发布

    1.maven-source-plugin 访问地址 在 pom.xml 中添加 下面的 内容,可以 使用 maven 生成 jar 的同时 生成 sources 包 <plugin> & ...

随机推荐

  1. IP地址、计算机名称、MAC地址如何获取

    以下的操作都在“命令提示窗口”中操作. 已知IP,如何获得计算机名称 方法(1): 使用ping -i ip地址 例如已知地址为192.168.1.168. 那么使用ping -i 192.168.1 ...

  2. I/O格式化与运算符

    I/O格式化与运算符 输出函数 Python3 - print() 在Python3中.print()的使用方法如下: >>> # ==== Python3 print() ==== ...

  3. 新版MySQL开始使用时遇到的问题(时区、权限):

    新版MySQL(本人Server version: 8.0.15)在刚开始使用时遇到的问题: 查看mysql安装版本:命令窗口 时区问题解决(The server time zone value 'Ö ...

  4. 计算机网络之DDOS

    1.什么是DDOS DDOS(Distributed Denial of Service),中文意思为“分布式拒绝服务”,就是利用大量合法的分布式服务器对目标发送请求,从而导致正常合法用户无法获得服务 ...

  5. Android Studio 插件 ADBWifi 无线调试真机

    长话短说,步骤如下 Android Studio 安装插件 ADB Wifi.这一步可以选择AS->Settings->Plugins->Market搜索:或者可以选择去插件官网下载 ...

  6. 自定义Springboot全局异常类

    一.简要说明 如何实现网上文章基本是随便一搜就可以很快找到, 这里不再赘述. 二.Spring-web和Spring-webmvc 通过idea查看到两个注解位于 spring-web-5.2.2.R ...

  7. sql 语句和实例

    修改字段格式的sql语句: alter table tablename alter column colname newDataType 比如:alter table mytable alter co ...

  8. 微软全球资深副总裁对 VS Code 黑宝书的推荐序!VS Code 月活用户已达 1200 万!

    前不久,首本 VS Code 中文书终于问世了! 在本书出版之前,我很高兴能邀请到微软全球资深副总裁 Julia Liuson 为本书写推荐序!下面,我们就来看一下 Julia 所写的推荐序的完整内容 ...

  9. springBoot整合redis(作缓存)

    springBoot整合Redis 1,配置Redis配置类 package org.redislearn.configuration; import java.lang.reflect.Method ...

  10. SpringBoot常用数据源配置

    #mysql8.X url: jdbc:mysql://localhost:3306/yourdbname?serverTimezone=UTC&useSSL=false&allowP ...