游泳，健身，webpack了解一下！

“学而时习之，不亦乐乎？”

前阵子认真学习了下webpack，趁今天这个机会来做一次总结，或者说是分享，毕竟好记性不如烂笔头嘛！

整篇笔记将从三个维度来介绍一下webpack，是什么，为什么，怎么用？个人以为这是比较符合人类直觉的，这篇文章主要讲前两点，第三点内容比较丰富，单独抽离，闲话少叙，let's go!

1. webpack到底是个啥？

webpack官网的概念一节中是这么描述的：

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

这段话里面有三个关键词：静态模块，dependency graph，bundle。从官网首页给出的图我们可以得知所谓静态模块，指的不外乎就是：js脚本，css样式表，图片，字体等

（注：相对静态资源来说，还有一个概念叫动态资源(dynamic resource)，它是指在开发阶段，不能被 webpack 直接引用的资源。这些资源都是通过项目上线之后，通过浏览器在运行时动

态获取的文件）。那么什么是依赖关系图呢？不急，让我们再看官网如何解释：

webpack 从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。 从这些入口起点开始，webpack 递归地构建一个 依赖图 ，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的 bundle - 通常只有一个 - 可由浏览器加载。

简言之，构建程序就像一个拼图游戏，所有的静态资源文件都是零零散散的元件，而依赖关系图就是游戏原图，webpack就是根据这张原图将所有零件组装成成品，即所谓的

bundle，至于如何构建依赖关系图，便不是本节所介绍的内容了，将在后面的文章中有所介绍。

2.干嘛要用webpack？

想想看，在我们没有webpack的时候，把所有资源统一放在一个文件夹里手动进行管理,在文件中通过<script>隐式引用js文件，这样做有什么弊病嘛？还是看官方文档指南一节，明确指出,使用这种方式去管理 JavaScript 项目会有一些问题：

1.无法立即体现，脚本的执行依赖于外部扩展库(external library)。
2.如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
3.如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。

这里透露出使用以前的文件管理方式会带来至少三个问题：

1.依赖关系不直观,程序可读性差。
2.引用顺序易出错,程序安全性及可维护性差。
3.错误引用浪费资源，污染全局变量，程序安全性差。

那么webpack是怎么解决这些个问题的呢？是的，模块化。以下，是官网对模块的介绍：

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

模块化通过定义局部化的私有变量和函数，并组织函数的调用有效解决了命名冲突、全局变量污染的问题，并大大提高了程序的可读性以及可维护性。常见的模块化规范有CommonJS、

AMD(require.js)、ES6模块化、css模块化，而webpack正是集大成者，支持以上所有规范，不仅如此，在Webpack里一切文件皆模块。通过loader转换文件，通过plugin注入钩子，最后输出

由多个模块组合的文件。（loader,plugin将在下一篇文章中有所介绍），当然，webpack不仅仅是一个打包机，它的强大远不止于此，比如：

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

说到这里，webpack是什么，为什么需要webpack打包工具，相信大家心里都有了一个大概的轮廓，在下篇文章中我们将具体讲一讲如何使用搭建一个webpack开发环境。

文章中有何谬误，还请各位斧正，在下前端新人一枚，请多宽宥！

推荐阅读：

• [1] webpack官网

• [2] 深入浅出Webpack