想必大家对webpack都不会太陌生，他作为一个模块打包工具伴随着前端开发的一步步强大起来也深入开发者开发过程的必备工具之中。前端开发与其他开发工作的主要区别首先是前端开发是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，他们通过增量加载的方式运行至浏览器，如何在开发过程中很好的阻止这些碎片化的代码和资源，并且保证他们在浏览器端快速的加载和更新，就需要一个模块化的系统，在这里webpack就扮演着这么一个角色。
webpack是一个模块打包工具，它是根据模块的依赖关系进行静态分析，然后将这些模块按照制定的规则生成对应得静态资源。
webpack简易图解
接下来就是对webpack的简单介绍：
1、webpack解决的主要问题：将依赖树拆分成按需加载的块；初始化加载的耗时尽量少；各种静态资源都可以视为模块；将第三方库整合成模块的能力；可以自定义打包逻辑的能力；适合大项目。
2、webpack的特点：
i、代码拆分：webpack有两种组织代码的形式分别是异步跟同步。异步依赖作为分割形成一个新的块，再优化了依赖树之后，每一个异步模块都作为一个文件被打包。
ii、loader：原来webpack只能处理原生的js模块，但是loader转换器的存在可以将各种类型的资源转换成js模块。这样任何资源都可以成为webpack可以处理的模块了。
iii、智能解析：webpack可以将每一个第三方库转化为模块进行加载，不管他的模块形式是CommonJS、AMD、还是普通的JS文件，并且在加载依赖的时候允许使用动态表达式:require("./templates/" + name + ".jade")。
iv、插件系统：webpack自己有一个强大的插件系统，大多数的内容功能都是基于这个插件系统运行的，还可以开发和使用开源的webpack插件，来满足各式各样的需求。
v、快速运行：webpack采用异步I/O和多级缓存提高运行效率，这使得webpack能够以令人难以置信的速递快速增量编译。
说了这么多关于webpack的介绍，接下来我们就要开时学习这个强大的打包工具了。
首先进行安装我们一般都是采用npm来进行安装的。
安装命令行
这是在全局环境下进行安装，安装完成后可以用webpack -h来进行测试是否安装成功。
接下来我们就以一个小例子来看一下webpack的运行与配置是怎样的，在那之前我们需要先安装一下环境依赖和webpack的一些常用插件。
首先我们来一起创建一个webpack的学习文件夹然后进入项目目录，通过npm init 初始化来创建package.json接下来安装webpack依赖：
创建文件夹并且初始化基本命令操作
如果大家比较懒下面的命令可以一直回车他也会自动给你创建完成的文件内容大概是这样子：
package.json
接下来就是我们需要安装的webpack依赖，以及指定版本的webpack：
安装webpack依赖
指定版本webpack安装命令：
安装指定版本webopack
如果需要一些其他的webpack插件的话我们还可以这样安装，我们这个小例子中还用到webpack-dev-server所以我们就安装一下：
webpack插件安装命令行
这样我们基本的依赖以及插件安装已经结束，接下来我们就需要做一些用来显示在浏览器中的东西了，首先一个大家熟的不能再熟的index.html代码用来展示我们这个小例子的结果：
index.html
然后我们需要创建一个js文件用来执行js代码（entry.js）：
entry.js
这样我们就完成了这个基本的小例子，直接运行然后打开index.html查看结果：
编译命令行
接下来就是用浏览器打开查看浏览器的结果了：
index.html
这样我们的第一个小例子就结束了，然后我们就可以乘胜追击接着往下学习跟具有挑战的东西了。
参考链接：webpack中文指南、webpack参考文档
下期预告：模块化引入、loader转换器、配置文件详细解析，敬请期待！
网友评论