webpack只是一個打包模塊的機(jī)制，只是把依賴的模塊轉(zhuǎn)化成可以代表這些包的靜態(tài)文件。并不是什么commonjs或者amd之類的模塊化規(guī)范。webpack就是識別你的 入口文件。識別你的模塊依賴，來打包你的代碼。至于你的代碼使用的是commonjs還是amd或者es6的import。webpack都會對其進(jìn)行分析。來獲取代碼的依賴。webpack做的就是分析代碼。轉(zhuǎn)換代碼，編譯代碼，輸出代碼。webpack本身是一個node的模塊，所以webpack.config.js是以commonjs形式書寫的(node中的模塊化是commonjs規(guī)范的)
webpack中每個模塊有一個唯一的id，是從0開始遞增的。整個打包后的bundle.js是一個匿名函數(shù)自執(zhí)行。參數(shù)則為一個數(shù)組。數(shù)組的每一項都為個function。function的內(nèi)容則為每個模塊的內(nèi)容，并按照require的順序排列。
// webpack.config.js
module.exports = {
entry:'./a.js',
output:{
filename:'bundle.js'
}
};
// a.js
var b = require('./b.js');
console.log('a');
b.b1();
// b.js
exports.b1 = function () {
console.log('b1')
};
exports.b2 = function () {
console.log('b2')
};
以上代碼我們打包處理的js為
// bundle.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var b = __webpack_require__(1);
console.log('a');
b.b1();
/***/ },
/* 1 */
/***/ function(module, exports) {
exports.b1 = function () {
console.log('b1')
};
exports.b2 = function () {
console.log('b2')
};
/***/ }
/******/ ]);
我們看到_webpack_require是模塊加載函數(shù)，接收模塊id（對，webpack中每個模塊都會有一個獨一無二的id，其實也就是在IIFE傳參數(shù)組中的索引值（0，1，2.....）
a依賴b，所以在a中調(diào)用webpack加載模塊的函數(shù)
// 1是模塊b的id
var b = __webpack_require__(1);
上面是使用的commonjs規(guī)范書寫的
webpack2是如何對實現(xiàn)es6 modules的
webpack模塊化原理-ES module
無論什么模塊規(guī)范書寫。我們的webpack進(jìn)行識別后打包的內(nèi)容不會相差很多，webpack有優(yōu)秀的語法分析能力，支持 CommonJs AMD 等規(guī)范。
webpack為什么能把任何形式的資源都視作模塊呢？因為loader機(jī)制。不同的資源采用不同的loader進(jìn)行轉(zhuǎn)換。CMD、AMD 、import、css 、等都有相應(yīng)的loader去進(jìn)行轉(zhuǎn)換。那為什么我們平時寫的es6的模塊機(jī)制，不用增加import的loader呢。因為我們使用了babel把import轉(zhuǎn)換成了require。并且Webpack 2 將增加對 ES6 模塊的原生支持并且混用 ES6、AMD 和 CommonJS 模塊。這意味著 Webpack 現(xiàn)在可以識別 import 和 export 了，不需要先把它們轉(zhuǎn)換成 CommonJS 模塊的格式：Webpack 2 有哪些新東西webpack對于es模塊的實現(xiàn)，也是基于自己實現(xiàn)的webpack_require 和webpack_exports ，裝換成類似于commonjs的形式。es6 module是靜態(tài)的依賴,所以在運行前進(jìn)行代碼轉(zhuǎn)換,這里的實現(xiàn)是將所有導(dǎo)出項作為一個對象的屬性,在入口文件執(zhí)行時,去遞歸的加載模塊。
如何實現(xiàn)一個簡單的webpack
- 讀取文件分析模塊依賴
- 對模塊進(jìn)行解析執(zhí)行(深度遍歷)
- 針對不同的模塊使用相應(yīng)的loader
- 編譯模塊，生成抽象語法樹AST。
- 循環(huán)遍歷AST樹，拼接輸出js。
webpack 源碼解析
細(xì)說 webpack 之流程篇
如何實現(xiàn)一個簡單的webpack
loader原理
在解析對于文件，會自動去調(diào)用響應(yīng)的loaderloader 本質(zhì)上是一個函數(shù)，輸入?yún)?shù)是一個字符串，輸出參數(shù)也是一個字符串。當(dāng)然，輸出的參數(shù)會被當(dāng)成是 JS 代碼，從而被 esprima 解析成 AST，觸發(fā)進(jìn)一步的依賴解析。webpack會按照從右到左的順序執(zhí)行l(wèi)oader。
Webpack——令人困惑的地方
