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 还有一个功能丰富的插件系统。