Webpack：初识

1.什么是webpack？

官方解释：从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

其实，我们就可以将webpack看成两个词语： 模块化、打包

模块化： 简单地说，模块化就是将代码抽离成一个个功能模块，目的就是为了方便对代码块的复用以及能起到防止变量污染的作用。

拓展：其他能起到模块化规范的还有 CommonJS 、AMD 、CMD 、ES6

打包： 就是将webpack中各种资源模块进行打包整合成一个或多个包。 它在打包的过程中，会对资源进行处理，比如将图片压缩、scss转成css，ES6语法整成ES5语法、TypeScript 转成 JavaScript等操作。

拓展：其他能实现打包操作的还有 grunt 、gulp

---

2. webpack中的模块化

在ES6之前我们想要进行模块化开发，就必须借助于其他的工具，并且在通过模块化开发完成项目后，还需要处理模块间的各种依赖，然后还要整合打包。

1.webpack这些都实现了，它能让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系

2.不仅仅局限于JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当作模块来使用。

---

3. 与grunt/gulp 对比

grunt/gulp 的核心是Task（任务），不是模块化。
它的运行主要分为以下几步

1.首先需要先配置一系列task（任务），并且定义这些任务进行怎样的处理，比如定义ES6转ES5、TS转JS、scss转css等。

2.然后让grunt/gulp 来依次执行上面这个任务队列，实现了流程的自动化。

因此grunt/gulp也被称为 前端自动化任务管理工具

webpack模块化打包工具，核心是模块化

因此 如果我们工程模块依赖非常简单，甚至没有模块化的概念，只需要进行简单的合并、压缩就是用grunt/gulp即可

如果整个项目要进行模块化管理，而且模块间的依赖非常强，就可以使用webpack

---

4. webpack的安装

webpack的使用是基于node.js的环境的，所以安装之前需要先去node官网下载，未安装的朋友请移步官网，请！https://nodejs.org/zh-cn/

之后就可以通过npm安装了（npm 是 node里的包管理工具）

全局安装

npm install webpack -g

局部安装

npm install webpack --save-dev

在终端直接执行webpack命令时，使用的时全局安装的webpack
在package.json中定义scripts时，包含了webpack命令，使用的是局部webpack