webpack介绍和安装及基本使用

1.什么是webpack？

（前端模块化打包工具）

从本质上 来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

但是它是什么呢？

我们从两个点来解释：模块 和 打包

1.1前端模块化

目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。

并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。

而且不仅仅是JavaScript文件，我们的css、图片、json文件等等在webpack中都可以被当做模块来使用。

这就是webpack中模块化的概念

1.2打包

打包就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。

并且在打包过程中 ，还可以对资源进行处理，比如压缩图片、将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

2.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是开发时依赖，项目打包后不需要继续使用的。

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

1.在终端直接执行webpack命令，使用的全局安装的webpack

2.当在packaage.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

3.webpack的基本使用

目录结构

dist：存放打包后文件的目录

src：存放需要打包文件的目录

打包命令：

 webpack ./src/main.js ./dist/bundle.js

main.js

//1.使用commonjs的模块化规范
const {add,mel} = require('./mathList.js')
console.log(add(10,20));
console.log(mel(10,20));
//2.使用ES6的模块化规范
import { name,age,height } from './info';
console.log(name);
console.log(age);
console.log(height);

打包成功后：（且在dist文件夹下生成bundle.js文件）

因为在main.js中引入其他js，所以在打包时会自动对所有依赖的文件进行打包合并。