webpack的基本介绍

一． Webapck的基本介绍

官网地址http://webpack.github.io/docs/

1.1.大致的打包过程

通过官网的 ‘what is Webpack’我们可以看到它将文件看作是一个个的模块，他们直接的箭头可以看成他们之间的依赖关系。
这样相互依赖的模块群通过webpack的打包处理将它们打包成浏览器可以直接运行额js，css或者png文件

1.2.目标：

 切分代码树，将代码树切分到不同的代码块里面，按需加载依赖（和前端的懒加载相似）
 保持初始化加载的时间更短
 任何静态资源都可以被视为一个模块，在项目中被引用
 可以整合第三方的类库，并且将其视为模块在项目中引用
 在打包的过程中任何一份都可以自定义
 非常适合大型项目

1.3和其他打包工具的不同

1.代码分割

webpack依赖树有两种类型的依赖关系:同步和异步。异步依赖性作为分割点,形成一个新块。块树优化后,每个块的文件发出。

2.Loaders （装载机）

webpack只能自己处理JavaScript，但是加载器用于将其他资源转换为JavaScript。通过这样做，每个资源组成一个模块。

3.Clever parsing（聪明解析）

webpack有一个聪明的解析器，可以处理几乎每一个第三方库。它甚至允许在依赖关系中的表达式，如：require(“./templates/” + name + “.jade”)。它处理最常见的模块样式：CommonJs和AMD。

4.Plugin System（插件系统）

webpack具有丰富的插件系统。大多数内部功能都是基于这个插件系统。这允许您根据需要自定义webpack，并将普通的插件作为开放源代码分发。

案例地址：https://github.com/haochangdi123/cleanUp-webpack