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来把资源处理成模块、、这是一个递归的顺藤摸瓜的操作，直到最终生成了上面所说的打包后的大模块~

原文链接：https://blog.csdn.net/w1857518575/article/details/81484172