北京微信网站设计报价,企业咨询诊断报告,免费网站源码下载,网站做的好看术语文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译 输出流程seal输出资源emit输出完成 小结 运行流程
是一个串行的过程#xff0c;它的工作流程就是将各个插件串联起来
在运行过程中会广播事件#xff0c;插件只… 文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译 输出流程seal输出资源emit输出完成 小结
运行流程
是一个串行的过程它的工作流程就是将各个插件串联起来
在运行过程中会广播事件插件只需要监听它所关心的事件就能加入到这条webpack机制中去改变webpack的运作使得整个系统扩展性良好
从启动到结束会依次执行以下三大步骤
初始化流程从配置文件和 Shell 语句中读取与合并参数并初始化需要使用的插件和配置插件等执行环境所需要的参数编译构建流程从 Entry 发出针对每个 Module 串行调用对应的 Loader 去翻译文件内容再找到该 Module 依赖的 Module递归地进行编译处理输出流程对编译后的 Module 组合成 Chunk把 Chunk 转换成文件输出到文件系统
初始化流程
从配置文件和 Shell 语句中读取与合并参数得出最终的参数
配置文件默认下为webpack.config.js也或者通过命令的形式指定配置文件主要作用是用于激活webpack的加载项和插件 关于文件配置内容分析如下注释
var path require(path);
var node_modules path.resolve(_dirname,node_modules);
var pathToReact path.resolve(node_modules,)
module.exports {entry:,resolve:{alias:{:pathTo } },//生成文件是模块构建的终点包括输出文件与输出路径output:{path:path.resolve(_dirname,build),filename:[name].js },//这里配置处理各模块的loader,包括css预处理loader,es6编译器module:{loaders:[{test:/\.js$/,loader:babel,query:{presets:[,] }} ],noParse:[pathTo]},//webpack各插件对象在webpack的事件流中执行对应的方法plugins:[]
}webpack 将 webpack.config.js 中的各个配置项拷贝到 options 对象中并加载用户配置的 plugins
完成上述步骤之后则开始初始化Compiler编译对象该对象掌控者webpack声明周期不执行具体的任务只是进行一些调度工作
class Compiler extends Tapable{constructor(context){super();this.hooks {beforeCompile:new AsyncSeriesHook([params]),compile: new SyncHook([params]),afterCompile: new AsyncSeriesHook([compilation]),make: new AsyncParallelHook([compilation]),entryOption: new SyncBailHook([context, entry])// 定义了很多不同类型的钩子} }
}
function webpack(options){var compiler new Compiler();...// 检查options,若watch字段为true,则开启watch线程return compiler;
}Compiler 对象继承自 Tapable初始化时定义了很多钩子函数
编译构建流程
根据配置中的 entry 找出所有的入口文件
module.exports {entry:./src/file.js
}初始化完成后会调用Compiler的run来真正启动webpack编译构建流程主要流程如下
compile 开始编译make从入口点分析模块及其依赖的模块创建这些模块对象build-module构建模块seal 封装构建结果emit 把各个chunk输出到结果文件
compile编译
执行了run方法后首先会触发compile主要是构建一个Compilation对象
该对象是编译阶段的主要执行者主要会依次下述流程执行模块创建、依赖收集、分块、打包等主要任务的对象
make 编译模块
当完成了上述的compilation对象后就开始从Entry入口文件开始读取主要执行_addModuleChain()函数
build module 完成模块编译
这里主要调用配置的loaders将我们的模块转成标准的JS模块
在用Loader 对一个模块转换完后使用 acorn 解析转换后的内容输出对应的抽象语法树AST以方便 Webpack后面对代码的分析
从配置的入口模块开始分析其 AST当遇到require等导入其它模块语句时便将其加入到依赖的模块列表同时对新找出的依赖模块递归分析最终搞清所有模块的依赖关系
输出流程
seal输出资源
seal方法主要是要生成chunks对chunks进行一系列的优化操作并生成要输出的代码
webpack 中的 chunk 可以理解为配置在 entry 中的模块或者是动态引入的模块
根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk再把每个 Chunk 转换成一个单独的文件加入到输出列表
emit输出完成
在确定好输出内容后根据配置确定输出的路径和文件名
output:{path:path.resolve(_dirname,build),filename:[name].js
}在 Compiler 开始生成文件前钩子 emit 会被执行这是我们修改最终文件的最后一个机会
从而webpack整个打包过程则结束了
小结 提示这里对文章进行总结 例如以上就是今天要讲的内容本文仅仅简单介绍了pandas的使用而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
