作者：王聰
學習目標
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
通過minipack這個項目的源碼學習瞭解上邊提到的整個工作流程
demo目錄
.
├── example
├── entry.js
├── message.js
├── name.js入口文件 entry.js：
// 入口文件 entry.js
import message from './message.js';
console.log(message);message.js
// message.js
import {name} from './name.js';
export default `hello ${name}!`;name.js
// name.js
export const name = 'world';入口文件
入口起點(entry point)指示 webpack 應該使用哪個模塊，來作爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
createAsset：生產一個描述該模塊的對象
createAsset 函數會解析js文本，生產一個描述該模塊的對象
function createAsset(filename) {
/*讀取文件*/
const content = fs.readFileSync(filename, 'utf-8');
/*生產ast*/
const ast = babylon.parse(content, {
sourceType: 'module',
});
/* 該數組將保存此模塊所依賴的模塊的相對路徑。*/
const dependencies = [];
/*遍歷AST以嘗試理解該模塊所依賴的模塊。 爲此，我們檢查AST中的每個導入聲明。*/
traverse(ast, {
ImportDeclaration: ({node}) => {
/*將導入的值推送到依賴項數組中。*/
dependencies.push(node.source.value);
},
});
const id = ID++;
/* 使用`babel-preset-env`將我們的代碼轉換爲大多數瀏覽器可以運行的代碼。*/
const {code} = transformFromAst(ast, null, {
presets: ['env'],
});
/*返回這個描述對象*/
return {
id,
filename,
dependencies,
code,
};
}createGraph: 生產依賴關係圖
function createGraph(entry) {
// 解析入口文件
const mainAsset = createAsset(entry);
/*將使用隊列來解析每個模塊的依賴關係。 爲此，定義了一個只包含入口模塊的數組。*/
const queue = [mainAsset];
/*我們使用`for ... of`循環迭代隊列。 最初，隊列只有一個模塊，但在我們迭代它時，我們會將其他新模塊推入隊列。 當隊列爲空時，此循環將終止。*/
for (const asset of queue) {
/*我們的每個模塊都有一個它所依賴的模塊的相對路徑列表。 我們將迭代它們，使用我們的`createAsset（）`函數解析它們，並跟蹤該模塊在此對象中的依賴關係。*/
asset.mapping = {};
// This is the directory this module is in.
const dirname = path.dirname(asset.filename);
// We iterate over the list of relative paths to its dependencies.
asset.dependencies.forEach(relativePath => {
// Our `createAsset()` function expects an absolute filename. The
// dependencies array is an array of relative paths. These paths are
// relative to the file that imported them. We can turn the relative path
// into an absolute one by joining it with the path to the directory of
// the parent asset.
const absolutePath = path.join(dirname, relativePath);
// Parse the asset, read its content, and extract its dependencies.
const child = createAsset(absolutePath);
// It's essential for us to know that `asset` depends on `child`. We
// express that relationship by adding a new property to the `mapping`
// object with the id of the child.
asset.mapping[relativePath] = child.id;
// Finally, we push the child asset into the queue so its dependencies
// will also be iterated over and parsed.
queue.push(child);
});
}
// At this point the queue is just an array with every module in the target
// application: This is how we represent our graph.
return queue;
}通過createGraph函數 生成的依賴關係對象：
[
{ id: 0,
filename: './example/entry.js',
dependencies: [ './message.js' ],
code: '"use strict";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);',
mapping: { './message.js': 1 } },
{ id: 1,
filename: 'example/message.js',
dependencies: [ './name.js' ],
code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "hello " + _name.name + "!";',
mapping: { './name.js': 2 } },
{ id: 2,
filename: 'example/name.js',
dependencies: [],
code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nvar name = exports.name = \'world\';',
mapping: {} }
]
bundle 打包
bundle函數把上邊得到的依賴關係對象作爲參數，生產瀏覽器可以運行的包
function bundle(graph) {
let modules = '';
graph.forEach(mod => {
modules += `${mod.id}: [
function (require, module, exports) {
${mod.code}
},
${JSON.stringify(mod.mapping)},
],`;
});
const result = `
(function(modules) {
function require(id) {
const [fn, mapping] = modules[id];
function localRequire(name) {
return require(mapping[name]);
}
const module = { exports : {} };
fn(localRequire, module, module.exports);
return module.exports;
}
require(0);
})({${modules}})
`;
// We simply return the result, hurray! :)
return result;
}參考例子，最終生產的代碼：
(function (modules) {
function require(id) {
const [fn, mapping] = modules[id];
function localRequire(name) {
return require(mapping[name]);
}
const module = { exports: {} };
fn(localRequire, module, module.exports);
return module.exports;
}
require(0);
})({
0: [
function (require, module, exports) {
"use strict";
var _message = require("./message.js");
var _message2 = _interopRequireDefault(_message);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
console.log(_message2.default);
},
{ "./message.js": 1 },
],
1: [
function (require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _name = require("./name.js");
exports.default = "hello " + _name.name + "!";
},
{ "./name.js": 2 },
],
2: [
function (require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var name = exports.name = 'world';
},
{},
],
})
分析打包後的這段代碼
這是一個自執行函數
(function (modules) {
...
})({...})函數體內聲明瞭 require函數，並執行調用了require(0);
require函數就是 從參數modules對象中找到對應id的 [fn, mapping]
如果模塊有依賴其他模塊的話，就會執行傳入的require函數,也就是localRequire函數
function require(id) {
// 數組的解構賦值
const [fn, mapping] = modules[id];
function localRequire(name) {
return require(mapping[name]);
}
const module = { exports: {} };
fn(localRequire, module, module.exports); // 遞歸調用
return module.exports;
}接收一個模塊id，過程如下：
第一步：解構module（數組解構），獲取fn和當前module的依賴路徑
第二步：定義引入依賴函數（相對引用），函數體同樣是獲取到依賴module的id，localRequire 函數傳入到fn中
第三步：定義module變量，保存的是依賴模塊導出的對象，存儲在module.exports中，module和module.exports也傳入到fn中
第四步：遞歸執行，直到子module中不再執行傳入的require函數
要更好了解“打包”的原理，就需要學習“模塊化”的知識。
參考：