1.引言 在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。比如，我们要使用JS的一些依赖库，就要在.html文件中使用<script>标签引用；要引用CSS的依赖就要使用标签。如果页面中引入的依赖文件太多，那么向服务发送的请求也随之增多，势必会拖慢网页的加载速度，影响用户体验。另外，网页的内容也会变得很臃肿，增加维护的难度。

在移动互联网时代的网站，正在逐渐演化成Web应用（Web Application，简称WebAPP），浏览器也在此之际不断的发展壮大，各种基于JavaScript语言的框架横空出世，Web前端发展速度着实之快，让我们也不得不加快学习的脚步。现在的Web前端更倾向于单页面应用（single-page application，简称SPA），减少页面的刷新次数，这就造成了庞大的页面代码管理问题，如果管理不好会导致很多问题，比如各个模块耦合度变高、难以维护等等。这就催生了模块管理器。

简单来说，Webpack就是一个“模块打包机”，它的主要工作就是分析项目中的结构找到JavaScript模块，根据各个模块之间的依赖关系进行静态分析，然后打包成一个独立的静态模块供浏览器调用，这样就可以大大减少请求次数，提供网页的性能，提高用户的体验。Webpack还有一个作用就是把浏览器目前还解释不了的扩展语言（例如Scss、TypeScript等）进行编译，转换成浏览器可以识别的内容。React中使用的是ES6的语法，在一些主流的浏览器上还不支持ES6，所有需要对Webpack进行配置后，React才能正常运行。

Webpack不仅是学习前端框架的前提，也是同学们将来面试必问、笔试必考、工作必用的内容，随着前端工程化的发展，Webpack正在变得越来越重要，尤其对于大型的一线互联网公司，会不会Webpack甚至能直接决定你是否能被录用。我从一个技术小白到全栈工程师，也经历了前端开发从刀耕火种到百家争鸣的各个阶段，着这个过程中沉淀了很多知识，也积累了大量的实践经验，也希望通过我的知识分享，让更多同学受益，避免大家踩坑。

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