认识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：更加强调前端流程的自动化，模块化不是其核心要点。