webpack入门指南-step01

1、webpack是什么？

web开发中经常使用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个模块打包工具（命令行工具），其能够兼容多种js书写规范，且能够处理模块间的依赖关系，具备更强大的js模块化的功能。 官方网站中用下图清晰的描述了webpack采用不一样的loader加载不一样的资源文件，打包生成多个js文件，也能够根据设置生成独立的图片、css文件等。 

 

 

2、为何使用 webpack？

在以往的开发过程当中，常常会遇到如下三种状况：

1. 项目中资源多样性和依赖性 - js、css、png、less、jade等 为了方便开发，咱们常常会使用不一样的语法来编写文档，用less、sass、jade等会提升开发效率，但同时咱们须要借助gulp或grunt来编写任务编译文件或对图片进行压缩等。
2. js模块规范复杂化 - AMD、CommonJS、UMD、ES6等 requireJS主要用来处理AMD规范的js文件，若使用CommonJS规范的js库文件，需进行AMD规范的封装，才能正常使用。而browserify主要处理CommonJS规范的文件，其余规范也须要进行转化。近期ES6的兴起，前面两种打包工具已经不能知足咱们的需求了。
3. 开发与线上文件不一致性（打包压缩形成影响）

webpack能够很好地解决上面的问题，它具备Grunt、Gulp对于静态资源自动化构建的能力，是一个出色的前端自动化构建工具、模块化工具、资源管理工具。

3、webpack 特性

webpack具备requireJs和browserify的功能，但仍有不少本身的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法作了兼容 2. 对js、css、图片等资源文件都支持打包 3. 串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持 4. 有独立的配置文件webpack.config.js 5. 能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间 6. 支持 SourceUrls 和 SourceMaps，易于调试 7. 具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活 8.webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快