webpack深入浅出系列：入门（系统性了解webpack）

前言

最近常常反思，做前端仔也有些日子了，除了存款跟技术跟买的股票该涨的没涨之外；年龄、三脂这些倒是涨了不少。那我该怎么办？又没有马保国的武德，又不会卖燕窝；那只能勤加努力，把技术再往上提一提，起码要定位到高级工程师先。所以计划先把webpack这个前端家喻户晓的东西弄透彻一点。我跟你不一样，我要学的是真谛，直击灵魂的那一行代码。所以你跟我一样，请start me。一起进步，有空点个赞，留个言。毕竟没人看写blog的动力会降低很多。

关于webpack计划出4篇文章：

• 入门篇（系统性地了解webpack）
• 进阶篇（从项目的角度去剖析webpack的作用及使用）
• 高级篇（剖析webpack的核心源码及一些牛逼特性）
• 优化篇（针对项目总结一些webpack优化的套路）

webpack是什么？

webpack官网：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

这张图最能清晰表达：

通俗的讲：将我们很多关系错综复杂的js，打包成一个js。【当然他不仅仅支持对js的打包，也能通过配置打包成多个js。】

为什么需要webpack？

• 原因1：
  假如我们项目中有a.js及b.js及c.js，并且这三个js相互依赖调用。那么在浏览器加载的时候不仅要发起三次请求，并且由于浏览器对js加载后的延迟执行等问题都很容易导致各种奇奇怪怪的问题。况且一个企业级项目少说都有上百个js文件。

• 原因2：
  模块化的发展推动webpack的崛起：近些年，前端的新框架那是一个接一个【在有了三五年工作经验的同学千万不要被这些迷惑，应该要深入原理，掌握本质。这句话也是警醒我自己】，而且各种开发思想也更演变得更想后端/移动端的开发。模块化、面向对象、微前端…。而这些演变的核心都是：让开发更加专注业务。而像ts转化成浏览器认识的js,scss转css；压缩代码、代码检查、自动发布…这些如果有个工具专门帮忙助理好那岂不妙哉？
  而像这种自动构建的先驱者还有Grunt、Gulp这些大佬，而打包只是作为这些自动构建中的其中一个功能。我认为webpack能够从这些工具中能够脱颖而出的原因就是前端的模块化。而webpack就是为此而生。

• 原因3：
  webpack有非常强大的维护团队并且有多年的实践验证；并且对目前的前端开发模式有非常好的支持。

npm与webpack的关系？

npm是nodejs的一个包管理工具，用于管理一个项目的依赖包。而webpack是属于一个项目的其中一个依赖包而已，并且webpack的作用是静态打包器。也就是说，npm在管理一个项目的所有包，webpack是帮助项目打包的包。

webpack的核心？

五大核心：

• entry ： 控制打包入口
• output ： 控制打包写入硬盘的设置
• loader ： 控制文件的加载器（如sass要增加sass-loader才能正常打包）
• plugins：增加功能
• mode ：打包模式（开发 | 生产，如生产模式做了很多优化项（如压缩代码））

这五大核心控制着在执行webpack打包命令后的整个打包流程。

webpack是如何运作的？

我直接做了张图来帮助自己系统地了解整个流程：

实际开发的过程中，我们会创建vue文件、sass、less、es6…等等，这些都是浏览器不认识的东西，而且webpack也不认识，我们要通过webpack配置这些文件的loader来解析加载，最后打包成浏览器认识的js、css、html。