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 還有一個功能豐富的插件系統。