本文开始， 我们尝试深入理解一下前端神器webpack。最终的目标：能够理解前端模块化，理解webpack打包的核心思路及执行，理解webpack中的“关键人物”。解锁这三点，最终彻底掌握。

Webpack干啥的

打包用的，简单说就是将项目的各种零散的文件揉成一个完整的js。比如我们的项目一共用到了a.js,b.js,c.js共三个文件，打包后就成了一个bundle.js。那问题来了，为什么要打包？我就喜欢零散的，咋了？

客观存在的需求

  • 其一： 零散文件使用，各个文件之间的依赖关系顺序，需要人为的梳理。比如在a文件里用到了b文件的某个属性，那么，b文件就应该先于a文件加载，否则error。可想而知此等操作，项目的复杂度一上来，开发人员直接崩溃。
  • 其二： 零散文件意味着，请求的数目随文件个数线性放大。那么遵循不发请求或者少发请求的终极性能准则，此方法依旧鸡肋。

因此，我们的神器webpack应运而生。当然啦，除了他还有很多其他的如gulp、parcel等的工具，非独此一款。

webpack具体的能力

  • 合并文件。在项目中，我们可能会到处import各种依赖，这些依赖又分布在各个文件中。webpack做的事情，说白了就是把所有的依赖代码，合并到一个js文件中。
  • 翻译官角色-loader。首先大前提，webpack默认只能处理js文件， 但是实际开发中一般都需要import一些除js的其他资源，如图片，样式等文件，此时，就需要使用各种loader帮助我们做编译转化的工作。比如我们需要用babel-loader处理es6版本及其之后的js，ts-loader处理ts文件，处理样式文件的用style-loader、css-loader、less-loader等等等。
  • 做点其他小动作-plugin。例如打包过程的进度条等。
  • 最后指明一点：loader和plugin都是可插拔的，意味着不是强制使用，根据需求灵活搭配。

补充webpack的生命周期

  1. beforeRun：Webpack进入编译前的阶段，此时会初始化 Compiler 对象。
  2. run：Webpack开始编译前的阶段，此时会读取入口文件和依赖，并创建依赖图。
  3. compilation：Webpack进入编译阶段，此时会开始编译入口文件和依赖的模块，并生成输出文件。
  4. emit：Webpack输出资源到output目录之后的阶段，此时可以在插件中处理生成的输出文件。
  5. done：Webpack完成打包后的阶段，此时可以在插件中进行一些清理工作。