webpack源码-打包资源输出到本地
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源码-打包资源输出到本地的更多相关文章
- RPMBUILD源码打包资源汇总(转)
http://mattshma.github.io/2015/11/04/rpm%E6%89%93%E5%8C%85/ http://400053.blog.51cto.com/390053/7210 ...
- 从Webpack源码探究打包流程,萌新也能看懂~
简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...
- .3-浅析webpack源码之预编译总览
写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂. 既然是浅析,那么案例就不必太 ...
- .30-浅析webpack源码之doResolve事件流(1)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- .17-浅析webpack源码之compile流程-入口函数run
本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...
- .30-浅析webpack源码之doResolve事件流(2)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- Spring源码分析——资源访问利器Resource之实现类分析
今天来分析Spring的资源接口Resource的各个实现类.关于它的接口和抽象类,参见上一篇博文——Spring源码分析——资源访问利器Resource之接口和抽象类分析 一.文件系统资源 File ...
- maven源码打包
1.打包时附加外部Jar包 <!--编译+外部 Jar打包--> <plugin> <artifactId>maven-co ...
- 使用 maven 自动将源码打包并发布
1.maven-source-plugin 访问地址 在 pom.xml 中添加 下面的 内容,可以 使用 maven 生成 jar 的同时 生成 sources 包 <plugin> & ...
随机推荐
- IP地址、计算机名称、MAC地址如何获取
以下的操作都在“命令提示窗口”中操作. 已知IP,如何获得计算机名称 方法(1): 使用ping -i ip地址 例如已知地址为192.168.1.168. 那么使用ping -i 192.168.1 ...
- I/O格式化与运算符
I/O格式化与运算符 输出函数 Python3 - print() 在Python3中.print()的使用方法如下: >>> # ==== Python3 print() ==== ...
- 新版MySQL开始使用时遇到的问题(时区、权限):
新版MySQL(本人Server version: 8.0.15)在刚开始使用时遇到的问题: 查看mysql安装版本:命令窗口 时区问题解决(The server time zone value 'Ö ...
- 计算机网络之DDOS
1.什么是DDOS DDOS(Distributed Denial of Service),中文意思为“分布式拒绝服务”,就是利用大量合法的分布式服务器对目标发送请求,从而导致正常合法用户无法获得服务 ...
- Android Studio 插件 ADBWifi 无线调试真机
长话短说,步骤如下 Android Studio 安装插件 ADB Wifi.这一步可以选择AS->Settings->Plugins->Market搜索:或者可以选择去插件官网下载 ...
- 自定义Springboot全局异常类
一.简要说明 如何实现网上文章基本是随便一搜就可以很快找到, 这里不再赘述. 二.Spring-web和Spring-webmvc 通过idea查看到两个注解位于 spring-web-5.2.2.R ...
- sql 语句和实例
修改字段格式的sql语句: alter table tablename alter column colname newDataType 比如:alter table mytable alter co ...
- 微软全球资深副总裁对 VS Code 黑宝书的推荐序!VS Code 月活用户已达 1200 万!
前不久,首本 VS Code 中文书终于问世了! 在本书出版之前,我很高兴能邀请到微软全球资深副总裁 Julia Liuson 为本书写推荐序!下面,我们就来看一下 Julia 所写的推荐序的完整内容 ...
- springBoot整合redis(作缓存)
springBoot整合Redis 1,配置Redis配置类 package org.redislearn.configuration; import java.lang.reflect.Method ...
- SpringBoot常用数据源配置
#mysql8.X url: jdbc:mysql://localhost:3306/yourdbname?serverTimezone=UTC&useSSL=false&allowP ...