webpack的介绍（快速了解）

1.什么是Webpack?
    从本质上讲，Webpack是一个前端模块化打包工具
    重点词：模块和打包

 

2.Webpack模块化的概念：

•     在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具使我们可以进行模块化开发
•     并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包
•     而Webpack其中的一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系
•     不仅仅是JavaScript文件，我们的CSS、图片、json文件等待在Webpack中都可以被当做模块来使用

 

3.打包：

•     就是将Webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)
•     并且在打包的过程中，还可以对资源进行处理，比如：压缩图片，将scss转成css，将ES6语法转成ES5语法等操作
•     打包的操作除了Webpack外还有grunt/gulp

 

4.grunt/gulp的核心是Task

•             我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩等）
•             之后让grunt/gulp来依次执行这些task，而且整个流程自动化
•             所以grunt/gulp也被称为前端自动化任务管理工具

5.什么时候用grunt/gulp？

•             如果你的工程模块依赖非常简单，甚至没有用到模块化的概念
•             只需要进行简单的合并、压缩，就使用grunt/gulp即可
•             但是，如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的Webpack

6.grunt/gulp和webpack有什么不同？

•             grunt/gulp更加强调的是前端流程的自动化，模块化不是他的核心
•             webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能

 

4.webpack、node和npm三者的关系：
    webpack为了可以正常运行，必须依赖node环境
    node环境为了可以正常的执行很多代码，必须其中包含各种依赖的包
    安装node环境的时候，会自动安装npm工具（node packages manage），npm工具是为了帮忙管理node环境下的各种包