Webpack是⼲啥的
1 webpack是基于nodejs的前端JS模块打包编译构建⼯具,为什么要有模块打包?因为把模块分散在多个JS⽂件⾥的话,在html页⾯⾥⾯就需要引⼊⾮常多的script标签,浏览器会分多个请求去加载⼀批js⽂件,影响效率和⽤户体验,如果把所有的模块都打包成⼀个js⽂件,这个⼤js⽂件⾥包含了所有模块和他们之间互相依赖的模块,浏览器加载的时候只加载⼀个js就可以了,⽤户体验和效率都会很⾼
2 webpack帮我们实现模块化管理⽅法:由于原⽣浏览器还不能完全⽀持模块化管理⽅法(import),所以需要在js⾥⾃⼰实现⼀套模块化管理⽅法,webpack会在最终打包的模块⾥实现require等⽅法
3 webpack打出的包中是如何组织模块的? 答案是⽣成⼀个数组来管理所有的打包进去的模块,每个模块都是数组中⼀个带编号的对象,模块调⽤require的时候,从数组中找到对应的模块来执⾏
4 webpack也⽀持运⾏时动态加载新的模块包,是如何实现的?答案是jsonp,webpack实现了⼀个回调函数,webpack把模块⽚段包编译出来的时候,会把动态加载的模块包数组作为那个回调函数的参数传递,当前端某⼀模块调⽤webpack的动态加载模块包函数的时候,会动态⽣成script标签来异步加载,当js加载完的时候⾃动会执⾏回调函数来把新模块包⾥⾯的模块添加到已有的模块包⾥⾯去,然后会回调⼀个⽤户准备好的promise,通知⽤户函数来require新的模块~
5 webpack可以打包的不⽌有js模块,还能打包css、甚⾄图⽚到模块⾥⾯去,背后的魔法其实是webpack把所有的资源都包装成了模块,⽐如css模块,调⽤require的时候⾃动释放到页⾯的style中去
6 webpack的编译打包过程是怎样?答案是给webpack的配置⽂件指定⼀个⼊⼝JS,webpack从⼊⼝js作为根,依次分析其中的require调⽤,取出require调⽤的函数参数,根据配置⽂件中配置的⽂件后缀名等信息,来调⽤不同的loader进⾏处理,⽐如.js .css .png分别调⽤不同的loader来把资源处理成模块、、这是⼀个递归的顺藤摸⽠的操作,直到最终⽣成了上⾯所说的打包后的⼤模块~