什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
为什么使用webpack
现在好多网页有着很多的应用，所以它们的JavaScript代码比较复杂，当然也有着很多的依赖包，所以为了简化开发的复杂度，前端就出现了很多比较好的实践方法：
- 模块化，让我们可以把复杂的程序细化为小的文件;
- 类似于
TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别； -
scss，less等CSS预处理器
......
等等
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求
webpack的优点
模块化
这个毋庸置疑，WebPack本来就可以看做是模块打包机，将项目结构模块化
代码拆分
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包
Loader
Webpack 本身只能处理原生的JavaScript模块，但是 loader 转换器可以将各种类型的资源转换成 javascript模块，这样，任何资源都可以成为 Webpack 可以处理的模块。比如说Webpack 本身是处理不了css的，但是它有css-loader，将css转换成js可以处理的模块
智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 js文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")
插件系统
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译
WebPack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
- Grunt和Gulp的工作方式是
在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。 - Webpack的工作方式是
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
webpack的缺陷
- 文档缺失，尤其中文文档
官方文档比较少，例子也比较简单，但是根据例子去配置很容易出错 - 配置难&难调试
稍微复杂一点的项目，如果使用webpack编译，不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完，在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。 - 打包后文件过大，打包慢
webpack把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大，不合理的文件合并策略，导致文件串行加载，所以打包编译特别慢，解决方式可见下文：
http://www.jianshu.com/p/a64735eb0e2b
网友评论