webpack的介绍和安装，简单使用

1. webpack是什么

webpack 是当下热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

• 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
• 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
• 而webpack其中一个核心就是让我们能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。
• 打包就是将webpack中的各种资源模块进行打包合并成一个或多个包(bundle)，并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

---

2. webpack的安装

首先要安装 Node.js，Node.js 自带了软件包管理器 npm，webpack 需要 Node.js v0.6 以上支持。

2.1 全局安装

npm install webpack -g

此时 Webpack 已经安装到了全局环境下，命令行下输入 webpack -v 可以查看安装的webpack的版本。

使用上述命令安装的是最新版的webpack，如果我们想要安装指定版本的webpack，比如3.6.0版本，可以执行下述命令：npm install webpack@3.6.0 -g

2.2 局部安装

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，打包容易出现问题。 所以通常一个项目，都有自己局部的webpack。我们会将 webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 webpack。

# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
 npm install webpack --save-dev

• --save-dev 指的是开发时依赖，项目最终在运行的时候不需要继续使用的
• 当我们执行完这个安装命令之后，package.json文件中就会多一个 devDependencies
  

---

3. webpack的基本使用

一些目录结构的说明：

1. src：源码文件夹
2. dist：打包后的文件夹

3.1 简单使用，代码演示

info.js 文件

// info.js 文件使用 ES6 的模块语法
let name = 'webchang';
let age =