WebPack详细入门教程（一）之简介
WebPack详细入门教程之简介
1、什么是Webpack
webpack是一个模块打包器：
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。简而言之，获取带依赖的模块并产生出与这些模块相对于的静态资源。
webpack的目标:
- 拆分依赖树成块并按需加载
- 让初始化加载时间更少
- 每一个静态资源应该是一个模块
- 能够集成第三方类库
- 适用于大型项目
- 能够定制模块打包的每一个部分
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
2、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
3.特点
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上的代码打包.
4.资源
webpack官方文档:http://webpack.github.io/docs/
