# 了解 webpack

# webpack 基本介绍

# webpack 是什么？

webpack 是前端目前最主流的 javascript 模块化管理工具，使用 webpack 可以对模块进行压缩、预处理、按需打包、按需加载等。在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的是，它为前端工程化提供了最好支持。

# webpack 为什么出现

• 开发分工的变化

  之前的前端工程师的工作只涉及到静态页面以及页面动画的的开发，其他工作是由后端开发工程师进行完善。到了今天，由于单页应用越来越多，前端工程师的工作也不仅仅是静态页面的开发，还涉及到路由、渲染以及业务逻辑的编写。随着前端开发的复杂度越来越高，我们的项目也需要进行拆分，所以我们需要一些构建工具对文件进行打包。

• 框架的变化

  在早期前端开发工作中，还是只是出现一些 js 库（JQuery、Yui等），主要是解决浏览器兼容性问题。后来就演变成应用开发，也就是 MVC 框架（backbone.js、JQuery等），前端开发的关注度从语言转移到了业务本身。到了今天，演变成了 mvvm 框架，也就是 vue、react、angular等，而要使用这些框架，就必须使用到构建工具。

• 语言的变化

  w3c 发布了新的 html5 规范，css 出现了 sass、less、stylus 这些预处理工具，JavaScript 也不断出现了新的规范和特性。随着这些语言的发展，以及一些工具的出现，为了使用这些工具，提高开发效率，解决个浏览器兼容性问题，就必须用到构建工具。

• 环境的变化

  随着时代的发展，我们的 JavaScript 代码不仅仅出现在浏览器上，还需要在手机、服务器上运行，因此我们的项目就会变得相当复杂，就必须用到构建工具提高效率。

• 社区的变化

  随着 github 和 npm 社区的出现，我们不需要在搜索引擎上寻找开发工具了。同时，为了使用这些工具，处理依赖问题，就必须用到构建工具。

# 为什么需要 webpack

就今天来说，可以使用的构建工具相当的多，那我们为什么偏偏要使用 webpack 呢？

一个很重要的原因就是现在前端的的三大框架都使用了 webpack 作为它们的命令行工具，所以我们必须了解 webpack。当然，它还有很多重要的特性，这也是三大框架之所以选择 webpack 作为命令行工具的原因，比如：代码分割、模块化等等。

# webpack 重要特征

• 插件化

  webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能。

• 速度快

  webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。

• 丰富的Loaders

  loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。

• 高适配性

  webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。

• 代码拆分

  webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的JS代码，减少首次请求的时间。

• 优化

  webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。

• 开发模式友好

  webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。

• 使用场景多

  webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景

# webpack和gulp的区别

gulp 是基于流的构建工具：all in one的打包模式，输出一个 js 文件和一个 css 文件，优点是减少 http 请求，万金油方案。

webpack 是模块化管理工具，使用 webpack 可以对模块进行压缩、预处理、打包、按需加载等。