初识 webpack 及安装 webpack 步骤

什么是Webpack？

At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

实质就是 模块 和 打包

打包如何理解呢？

• 理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。
• 就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
• 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

Webpack和grunt/gulp的对比

grunt/gulp的核心是Task

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

gulp的task

• 下面的task就是将src下面的所有js文件转成ES5的语法。
• 并且最终输出到dist文件夹中。

grunt/gulp和webpack有什么不同？

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

webpack安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

查看自己的node版本：

node -v

全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本

npm install webpack@3.6.0  -g

局部安装webpack（后续才需要）
–save-dev是开发时依赖，项目打包后不需要继续使用的。

cd 对应目录
npm install webpack@3.6.0 --save-dev 

为什么全局安装后，还需要局部安装呢？

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