3.12.1 webpack是什么

webpack是一个开源的前端打包工具。当webpack处理应用程序时,它会构建一个依赖关系图,其中包含应用程序所需要的各个模块,然后将所有这些模块打包成一个或多个模组。webpack可以通过终端或修改webpack.config.js文件来设定各项功能。

使用webpack前需要先安装Node.js,webpack其中一个特性是使用载入器将资源转化成模组,开发者可以自定义载入器的顺序、格式来适应需求。

简单来说,一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、Coffee、样式(含Less/Sass)、图片等都作为模块使用和处理。可以直接使用require(XXX)的形式来引入各模块,即使它们可能需要经过编译(比如JSX和Sass),但开发者无须在上面花费太多心血,因为webpack有着各种健全的加载器(loader)在默默处理这些事情,这一点本书后续会提到。

webpack的优点如下:

  • webpack是以CommonJS的形式来书写脚本的,对AMD/CMD的支持也很全面,方便旧项目进行代码迁移。
  • 能被模块化的不仅仅是JavaScript,其他的静态资源同样也可以进行模块化。
  • 开发便捷,能替代部分Grunt/Gulp的工作,如打包、压缩混淆、图片转Base64等。
  • 扩展性强,插件机制完善。