为什么使用webpack?

什么是webpack?

webpack是一个模块打包器

webpack获取带依赖的模块并产生出与这些模块相对于的静态资源.

webpack的目标:

• 拆分依赖树成块并按需加载

• 让初始化加载时间更少

• 每一个静态资源应该是一个模块

• 能够集成第三方类库

• 适用于大型项目

• 能够定制模块打包的每一个部分

特点

Plugins(插件)

webpack有着丰富的插件接口,这使得webpack非常的灵活

Performance(性能)

webpack使用异步I/O和多级缓存,这使得webpack在增量编译上极其快.

Loader(装载机)

webpack支持通过装载机预处理文件.这允许你处理任何静态资源(不仅仅是JavaScript),你可以很轻松的写出在Nodejs上运行的装载机.

Suport(支持)

webpack支持AMD和CommonJs模块样式.它巧妙的在你代码的AST中进行静态分析,它甚至还能处理简单的表达式,这样就允许你支持更多的类库.

Code Splitting(代码拆分)

webpack允许你将你的代码拆分成块,每块代码按需加载,这样就可以减少初始化加载时间.

Optimizations(优化)

webpack可以大量的优化来减少输出的大小,并使用hashes来实现请求缓存.

Development Tools(开发工具)

webpack支持SourceUrls和SourceMaps进行简单的调试.通过development middleware来监控文件和development server来自动刷新.

Multiple targets(多个目标)

webpack的主要目标是web,同时它也支持为nodejs和WebWorkers上的代码打包.

Motivation(动机)

现在的website正在慢慢演变为webapps:

• 越来越多的JavaScript代码被使用

• 现代浏览器提供了丰富的接口

• 更少的全页面重载，也就意味着单页面需要加载更多的代码.

这样的结果就是大量的代码会存在于client side.这样大量的代码就需要被组织.模块系统可以有效的管理你的代码.

组织代码的方式.

<script>标签方式(不存在模块系统)

缺点:

• 容易导致全局冲突

• 文件加载的顺序很重要(被依赖的需放到前面)

• 开发者需要处理类库之间的依赖

• 在大型项目中加载列表(<script>标签)可能会很长，并且难于管理

CommonJS

缺点:

• 阻塞调用在网络中调用并不是很好,网络请求是异步的.

• 多个模块无平行加载

AMD及其衍生

缺点

• 编码开销。阅读和编写都更加困难.

• 似乎是某种变通方法

ES6 Modules

缺点

• 浏览器支持需要时间

• 非常少的模块化管理是以这种方式进行管理

资源

webpack官方文档:http://webpack.github.io/docs/