webpack构建典型应用程序,有3种主要的代码类型:你跟你的团队编写的源码+你的源码依赖的任何第三方library或者vendor代码+webpack的runtime跟manffest,管理所有模块的交互;
1:runtime
runtime以及伴随的manifest数据,主要指:在浏览器运行时,webpack用来连接模块化应用程序的所有代码;runtime包含:在模块交互时,连接模块所需的加载和解析逻辑;包括浏览器中的已加载模块的链接,以及懒加载模块的执行逻辑;
2:manifest
一旦你的应用程序中,比如index.html文件,一些bundle和各种资源加载到浏览器中,会发生什么?你精心安排的/src目录的文件结构现在已经不存在了,所以webpack如何管理所有模块之间的交互呢?这就是manifest数据用途的由来;
当编译器(compiler)开始执行。解析和映射应用程序时,他会保留所有模块的详细要点,这个数据集合成为‘manifest’,当完成打包并发送到浏览器时,会在运行时通过manifest来解析和加载模块,无论你选择哪种模块语法,那些import或者require语句现在都已经转换为webpack_require方法,这个方法指向模块标识符(module identifier)。通过使用manifest中的数据,runtime将能够查询模块标识符,检索出背后对应的模块;
3:问题
webpack的幕后工作:runtime使用manifest来执行操作。然后一旦你的应用程序加载到浏览器中,所有内容将展现出魔幻般运行;然而,如果你决定通过使用浏览器缓存来改善项目性能,理解这个过程将变得尤其重要;
通过使用bundle计算出内容散列(content hash)最为文件名称,这样在内容或文件修改时,浏览器中将通过新的内容指向新的文件,从而是缓存无效,一旦开始这么做,你回立即注意到一些有趣的行为;即使表面上某些内容没有修改,计算出的哈希值还是会改变,这是因为,runtime和manifest的注入在每次构建会发生变化;
4:构建目标
webpack可以为js的各种不同的宿主环境提供编译功能,为了能正确的进行编译,就需要开发人员在配置里面正确的进行配置。默认情况下,target的值是web,也就是为类浏览器的环境提供编译。