webpack简介
webpack是 前端资源模块化管理工具和打包工具；
webpack本身只能识别模块引入，打包模块的功能；webpack能识别ES Moudule、common JS等模块规范
一、现有模块系统
1、CommonJS
关键词：module.exports exports require
特点：
（1）node.js遵循CommonJs，npm中有近20万个可以使用的模块
（2）同步加载所依赖的模块资源，阻塞加载，不能并行加载模块
（3）当前浏览器暂不支持同步加载模块
使用方法：
require('module');
require('../file.js);
exports.doStuff = function(){}
module.exports = someValue;
2、AMD Asynchronous Module Definition (异步模块定义)
主要是一个接口 define(id?,dependencies?,factory)，在声明模块时指定所有依赖，并且要当做形参传入到factory（工厂）中，对于依赖的模块提前执行，依赖前置；
关键词：define require
特点：
（1）适合浏览器环境异步加载模块
使用方法：
define('module',['dep1','dep2'],function(d1,d2){
return someExportedValue;
})
require(['module','../file'],function(module,file){})
3、CMD Common Module Definition
与AMD相似，并与CommonJs和Node.js的Modules规范保持了很大的兼容性；
特点：
（1）依赖就近，延迟执行
（2）能在Node.js中运行
使用方法：
define(function(require,exports,module){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
4、ES6模块 ES Moudule
关键词：import export default
ECMAScript6标准增加了js语言层面的模块概念。
特点：
（1）面向未来的ECMAScript标准，原生浏览器端没有兼容
（2）属于全新的命令字，新版的Node.js才支持
/*header.js*/
function header(){
var appEl = document.getElementById('app');
var header = document.createElement('div')
header.innerHTML = 'header';
appEl.appendChild(header)
}
//ES Module
// export default header;
// export {header,header2}
//commonJS
// module.exports = header; //第一种写法
// exports.header = header; //第二种写法
//AMD
// define('header',function(){
// return header;
// });
/*index.js*/
//ES module
// import header from './header';
// import {header,header2} from './header';
//commonJS
// var header = require('./header');//module.exports = header; 对应
// var header = require('./header').header; //exports.header = header; 对应
//AMD
// var header = require('./header.js');
new header();
webpack特点：
（1）代码拆分，实现前端模块按需加载，分块传输，避免了传统模块系统极端的加载传输方式；（传统模块系统极端的两个加载传输方式：a、每个模块文件都单独请求，造成请求次数过多，导致应用启动速度慢；b、把所有模块打包成一个文件然后只请求一次，导致一次请求加载所有模块导致流量浪费、初始化过程慢；）
（2）通过loader转换器可以将各类资源转换为javascript模块，如：样式，图片，字体，html，less、sass、模板库多语言系统等等；
（3） Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。
（4） Webpack 还有一个功能丰富的插件系统。
