认识webpack
什么是webpack
官方解释
At its core,webpack is a static module bundler for modern JavaScript application.
即 webpack是一个现代的JavaScript应用的静态模块打包工具
关键词:模块化、打包
从模块化和打包两个关键词来解释webpack
1、模块化
前端模块化方案:AMD、CMD、CommonJS、ES6
ES6之前:
- 开发人员进行模块化开发必须要借助其他工具;
- 在通过模块化开发完成项目之后,还需要处理模块间的各种依赖;
- 最后将其进行整合打包。
webpack模块化概念:
- webpack其中一个核心是让开发者能够进行模块化开发,并帮助处理模块间的依赖关系;
- 不仅仅是js文件,css文件、图片、jason文件等在webpack中都可以被当做模块来使用。
2. 打包
打包工具:grunt、gulp、webpack
grunt、glup打包:
- 介绍:grunt、glup是任务流工具
Task Runner
,核心是Task,也称为前端自动化任务管理器。 - 过程: 配置一系列的task,且定义task要处理的事务(如:ES6、TepyScript转化,图片压缩,scss转成css等等。),通过grunt、glup依次执行这些task,整个流程自动化。
- 运用:
- 项目工程没有用到模块化的概念;
- 项目工程模块依赖非常简单;
- 只需要进行很简单的合并、压缩。
webpack打包:
- 介绍:webpack是模块化打包工具
Module Bundler
,核心是Module模块化 - 作用:
- 将webpack中的各种资源模块进行打包合并成一个或多个包(bundle);
- 在打包的工程中,可以对资源进行处理。如:压缩图片、将scss转成css、将ES6语法转成ES5语法、将TypeScript转成JavaScript等操作。
webpack 和 grunt、glup的区别
webpack:更加强调模块化开发管理。附带功能:文件压缩合并、预处理等。
grunt、glup:更加强调前端流程的自动化,模块化不是其核心要点。