1.1. 什么是webpack

webpack是nodejs的一个模块，该模块提供了构建前端开发环境(打包，转码，构建开发服务器...) 的功能。

1.2. webpack的功能

把模块化开发时所创建的文件打包成一整份文件，以便于在浏览器环境中执行。

可以分析模块化开发时所配置的文件依赖，使打包好的文件可以有序的执行。

提供了各种loader，可以处理各种非js类型的资源文件，一并构建打包。

在构建过程中，可以通过插件去处理一些额外的功能。

提供一个开发服务器，方便开发过程中在服务器环境下预览页面，实现免刷新，热替换等功能。

1.3. 为什么使用webpack

思考一下，为什么在项目中使用webpack呢？传统的前端开发方式有什么问题呢？

1.3.1. 传统前端开发中的问题

传统的页面开发时，页面的js文件需要使用script标签引入。然而开发的时候把js文件分成很多份是必要的，那么此时在一个页面中就需要引入多个script标签。而且不同的js文件引入的顺序也不能打乱。如下图：

就像上边的图示的那样，如果在开发一个文件的时候，还需要把这些文件在原样引入一遍。这还不是最糟糕的，最糟糕的是临时需要加入一个依赖文件的话，那么就需要挨个文件去添加(简直是一场噩梦)。这样的做法是不优雅的！！！

1.3.2. 使用模块化开发

commonjs规范或者是es6的模块化，都是很棒的模块化开发的方式，这些可以让我们很方便的去处理上述遇到的依赖问题，让开发更加优雅。但是，还有一个很重要的问题，浏览器是不支持commonjs和es6的模块化开发的。这个时候，我们的打包工具webpack就登场了，它主要就是为此诞生的。在这里官网的一张图很好的诠释了webpack的意义