浅谈webpack打包原理

近来想要对旧项目进行优化，所以了解下webpack打包原理为优化做准备

webpack 4.x

打包文件

index.js

image.png

print.js

image.png

输出

image.png

输出是一个自执行函数主要由两个部分组成一个是函数体，一个是参数

参数就是两个打包的文件

稍做处理后分别为

image.png image.png

我们可以看到webpack其实是对模块化做了处理，

无论什么模块规范书写。我们的webpack进行识别后打包的内容不会相差很多，webpack有优秀的语法分析能力，支持 CommonJs AMD 等规范。
webpack为什么能把任何形式的资源都视作模块呢？因为loader机制不同的资源采用不同的loader进行转换。CMD、AMD 、import、css 、等都有相应的loader去进行转换。es6 module是静态的依赖,所以在运行前进行代码转换,这里的实现是将所有导出项作为一个对象的属性,在入口文件执行时,去递归的加载模块。

并且由生成的代码可以看到打包后的每一个模块都是有自己的命名空间的