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. yii2.0数据库操作

    User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->w ...

  2. 手写简易版Promise

    实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了. ...

  3. ca71a_c++_指向函数的指针_通过指针调用函数txwtech

    /*ca71a_c++_指向函数的指针_通过指针调用函数用typedef简化函数指针的定义简化前: bool(*pf)(const string&, const string &); ...

  4. SpringBoot + Mybatis + Redis 整合入门项目

    这篇文章我决定一改以往的风格,以幽默风趣的故事博文来介绍如何整合 SpringBoot.Mybatis.Redis. 很久很久以前,森林里有一只可爱的小青蛙,他迈着沉重的步伐走向了找工作的道路,结果发 ...

  5. 容器技术之Docker Machine

    前文我们聊了下docker容器的资源限制,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13138725.html:今天我们来聊一聊docker machine ...

  6. WIN7系统安装photoshop CS6出现配置错误:16的解决方法

  7. 黎活明8天快速掌握android视频教程--24_网络通信之网页源码查看器

    1 该项目的主要功能就是从将后台的html网页在Android的界面上显示出来 后台就是建立一个java web工程在工程尚建立一个html或者jsp文件就可以了,这里主要看Android客户端的程序 ...

  8. linux网络编程-一个简单的线程池(41)

    有时我们会需要大量线程来处理一些相互独立的任务,为了避免频繁的申请释放线程所带来的开销,我们可以使用线程池 1.线程池拥有若干个线程,是线程的集合,线程池中的线程数目有严格的要求,用于执行大量的相对短 ...

  9. Auto-keras API详解

    在网上找到的Auto-keras API详解,非常全面,防止丢失记录在这! Auto-Keras API详解(1)——安装Auto-Keras https://blog.csdn.net/weixin ...

  10. SpringBoot之入门教程-SpringBoot项目搭建

    SpringBoot大大的简化了Spring的配置,把Spring从配置炼狱中解救出来了,以前天天配置Spring和Mybatis,Springmvc,Hibernate等整合在一起,感觉用起来还是挺 ...