WebPack介绍

一、Webpack 是什么

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器，Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了。在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。对应各种不同文件类型的资源, Webpack 有对应的模块 loader。

Webpack的产生是跟随着NodeJS的脚步，现在自动化是一个新的开发模式， 过去前端开发需要本地安装 服务器，对于不熟悉 服务器的前端开发人员配置服务器是一个非常困难的事情。Webpack可以解决这个问题，不需要安装服务器，只需要配置 相关的文件，安装依赖就可以搭建一个本地的服务器。

二、Webpack的作用

1、文件的合并和压缩

提到网站的性能优化大家可能会想到很多的方法，例如：js文件合并压缩、css文件的合并压缩、图片的雪碧、html页面的压缩等，但是这些方法都需要通过第三方工具实现，实现 起来非常的麻烦。通过Webpack就可以 很轻松的实现这些功能。

2、js文件模块化

CommonJS 与 AMD 支持

Webpack 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码。不过实际上, 引用模块的规则是依据 CommonJS 来的

require('lodash') // 从模块目录查找
require('./file') // 按相对路径查找

AMD 语法中, 也要注意, 是按 CommonJS 的方案查找的

define (require, exports. module) ->  require('lodash') # commonjs 当中这样是查找模块的  require('./file')

三、WebPack的特点

• 将依赖树拆分，保证按需加载

• 保证初始加载的速度

• 所有静态资源可以被模块化

• 可以整合第三方的库和模块

• 可以构造大系统

1. 丰富的插件，方便进行开发工作

2. 大量的加载器，包括加载各种静态资源

3. 代码分割，提供按需加载的能力

4. 发布工具

四、WebPack的优势

webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善，特别是支持 React 热插拔。