为何使用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/