第一:webpack的工作步骤如下:
1.从入口文件开始递归地建立一个依赖关系图。
2.把所有文件都转化成模块函数。
3.根据依赖关系,按照配置文件把模块函数分组打包成若干个bundle。
4.通过script标签把打包的bundle注入到html中,通过manifest文件来管理bundle文件的运行和加载。(疑问:bundle文件的运行和加载为什么需要管理?)
打包的规则为:一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。按需加载的模块或需单独加载的模块则分开打包成其他的bundle。
除了这些bundle外,还有一个特别重要的bundle,就是manifest.bundle.js文件,即webpackBootstrap。这个manifest文件是最先加载的,负责解析webpack
打包的其他bundle文件,使其按要求进行加载和执行。
1.webpack manifest文件用来引导所有模块的交互
2.当webpack编译器处理和映射应用代码时,它把模块的详细的信息都记录到了manifest文件中。
当模块被打包并运输到浏览器上时,runtime就会根据manifest文件来处理和加载模块。利用manifest就知道从哪里去获取模块代码\
3.Tree Shaking
去除无用代码,比如某个js文件里的函数并没有被使用,这段函数代码在打包时将会被去掉。
4.Hot Module Replacement
热模块替换功能可以在不刷新所有文件的情况下实现单独跟新某个模块。
5.Entry
入口文件是webpack建立依赖图的起点。
6.Output
Output配置告诉webpack怎么处理打包的代码。
第二知识点:webpack build后生成的app、vendor、manifest区别;以及按需加载?
vendor.js: 默认将node_modules里require的依赖都打包在这里
manifest.js: 在vendor.js的基础上,主要将一些异步加载等打包在这里
app.js: 默认将所有你自己写的js打包在这里