这款简易版 webpack 主要实现的功能以下:javascript
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行如下流程:java
类型 | 如何辨别node |
使用要点 |
Basic | hook 中不包含如下三个类型关键字的linux |
不关心监听函数是否有返回值 |
Bail | hook 中包含 Bailwebpack |
保险式: 只要监听函数中有返回值(不为 undefined ),则跳过以后的监听函数 |
Waterfall | hook 中包含 Waterfallgit |
瀑布式: 上一步的返回值交给下一步使用 |
Loop | hook 中包含 Loopes6 |
循环类型: 若是该监听函数返回 true,则这个监听函数会反复执行,若是返回undefined 则退出循环 |
node_modules\webpack\bin\webpack.js
github
// 找到这里的代码
// webpack 有两种命令行工具: webpack-cli 和 webpack-command
// 由于 webpack-cli 功能更强大,通常都是用 webpack-cli,因此会执行下面的语句
else if (installedClis.length === 1) {
const path = require("path");
const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
const pkg = require(pkgPath);
require(path.resolve(
path.dirname(pkgPath),
pkg.bin[installedClis[0].binName]
));
} 复制代码
node_modules\webpack\lib\webpack.js
web
node_modules\webpack\declarations
typescript
node_modules\webpack\lib
// debugger.js 和项目中的 packge.json 同级
// 右键运行 debugger.js ,至关于使用 npx webpack 运行 webpack
// npx webpack 其实就是用 node 执行 bin 下面的 cli.js
// npx webpack = node ./node_modules/webpack-cli/bin/cli.js
// 找到 webpack-cli/bin/cli.js ,设置断点,就能够开始调试了(这是第一种方法)
const path = require("path");
const pkgPath = require.resolve(`webpack-cli/package.json`);
const pkg = require(pkgPath);
require(path.resolve(
path.dirname(pkgPath),
'./bin/cli.js'
//pkg.bin['webpack-cli']
));复制代码
let webpack = require("webpack");
let webpackOptions = require("./webpack.config");
const compiler = webpack(webpackOptions);
compiler.run((err, stat) => {
console.log(err);
console.log(stat)
});复制代码
const path = require('path');
module.exports = {
// 用开发模式打包代码 !!!!!!
mode:'development',
devtool:'none',
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
};复制代码
// src/index.js
import {logMsg} from './sync-module';
console.log(logMsg);
let button = document.createElement('button');
button.innerHTML = '请点我';
button.addEventListener('click',()=>{
import(/*webpackChunkName: 'async-module'*/'./async-module.js').then(result=>{
console.log(result.default);
});
});
document.body.appendChild(button);
// src/async-module.js
module.exports = "我是异步模块";
// src/sync-module.js
export function logMsg() {
console.log('我是同步模块');
}复制代码
/* src/ index.js sync-module.js async-module.js */
// webpack 打包后,会把引用模块的相对路径变成相对于 webpack.config.js 的相对路径
// 在 index.js 中 引入 "./sync-module.js" => 最终会变成 "./src/sync-module.js"
// webpack 启动代码的自执行函数
(function(modules) { // webpackBootstrap
// install a JSONP callback for chunk loading
function webpackJsonpCallback(data) {
// data => [
// [chunkName],
// { chunkID : chunk 内容}
// ]
var chunkIds = data[0];
var moreModules = data[1];
// add "moreModules" to the modules object,
// then flag all "chunkIds" as loaded and fire callback
var moduleId, chunkId, i = 0, resolves = [];
for(;i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
// installedChunks[chunkId] => [resolve, reject, Promise]
// 将 resolve 存到 resolves 数组中,先不着急执行 resolve()
resolves.push(installedChunks[chunkId][0]);
}
// 设置为 0 ,表示已经加载成功
installedChunks[chunkId] = 0;
}
for(moduleId in moreModules) {
if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
// 异步 chunk 加载完成后,将异步 chunk 的代码合并到 modules 中
// 这样以后加载该 chunk 时,能够直接从 modules 中获取到
// key 是模块 ID ,value 是模块内容
modules[moduleId] = moreModules[moduleId];
}
}
if(parentJsonpFunction){
parentJsonpFunction(data);
}
while(resolves.length) {
// 执行 resolve
resolves.shift()();
}
}
// The module cache
// 普通模块的缓存:只要加载初始化过一次的模块都放到这,以后再使用这个模块时
// 直接从这里获取,不须要再初始化一遍
var installedModules = {};
// object to store loaded and loading chunks
// !!!!!!!!!!!!!!!!!!!!!!
// 存储已加载的或者加载中的 chunk (这里的 chunk 包含: 入口 chunk 和异步加载的 chunk)
// !!!!!!!!!!!!!!!!!!!!!!
// installedChunks 对象中,每一个 key 对应的 value 值的意思
// undefined = chunk not loaded, null = chunk preloaded/prefetched
// undefined 表示 chunk 还未加载,null 表示 chunk 会预加载
// Promise = chunk loading, 0 = chunk loaded
// Promise 表示 chunk 正在加载中,0 表示 chunk 加载完成
var installedChunks = {
// 若是是单入口,key 的默认值是 main
"main": 0
};
// script path function
// 设置异步 chunk 的请求 url
function jsonpScriptSrc(chunkId) {
return __webpack_require__.p + "" + chunkId + ".bundle.js"
}
// The require function
// webpack 本身实现的一个 require 方法,能够直接在浏览器中运行
function __webpack_require__(moduleId) {
// Check if module is in cache
// 加载模块前,先从缓存列表中查找,是否已经加载过
if(installedModules[moduleId]) {
// 若是有,说明模块已经缓存过,直接返回该模块的导出对象 exports
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
// 建立一个新的模块对象,而且放到缓存列表中
var module = installedModules[moduleId] = {
// 模块 ID
i: moduleId,
// 是否已经加载 loaded:false
l: false,
// 模块导出对象,默认是一个空对象
exports: {}
};
// Execute the module function
// 加载模块
// modules 是自执行函数接收的参数——一个包含模块信息的对象
// key 是模块路径, value 是一个函数,里面包含了模块的内容
// {
// "./src/a.js":
// (function(module, __webpack_exports__, __webpack_require__) {
// 模块内容:xxx
// 模块内容:xxx
// 模块内容:xxx
// },
// }
// 从 modules 对象中找到对应的 key,执行函数(value)并将内部的 this 指向上面新建 module 的 exports 对象
// 目的是将函数内部的内容都放置到 module.exports 中
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
// 设置为已加载
module.l = true;
// Return the exports of the module
// 最终返回当前模块的内容
return module.exports;
}
// This file contains only the entry chunk.
// The chunk loading function for additional chunks
// 加载异步 chunk
__webpack_require__.e = function requireEnsure(chunkId) {
var promises = [];
// JSONP chunk loading for javascript
// 用 jsonp 来请求加载异步 chunk
var installedChunkData = installedChunks[chunkId];
// 0 means "already installed".
// 若是要加载的 chunk 没有初始化过
if(installedChunkData !== 0) {
// a Promise means "currently loading".
// 排除了 0,缓存 chunk 列表里的值就剩下 undefined/null/Promise
// 当模块正在加载中时
if(installedChunkData) {
promises.push(installedChunkData[2]);
}
// 当模块还未加载过
else {
// setup Promise in chunk cache
var promise = new Promise(function(resolve, reject) {
// 新建一个 promise 时,会当即执行它的函数体
// 将当前 chunk 的状态设置为 Promise,表示正在加载中
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
// 给当前的 installedChunkData 添加一个值
// 而后将 installedChunkData 添加到 promises 数组中
promises.push(installedChunkData[2] = promise);
// start chunk loading
// 用 jsonp 来请求加载异步 chunk
var script = document.createElement('script');
var onScriptComplete;
script.charset = 'utf-8';
script.timeout = 120;
if (__webpack_require__.nc) {
script.setAttribute("nonce", __webpack_require__.nc);
}
// 设置请求 url
script.src = jsonpScriptSrc(chunkId);
// create error before stack unwound to get useful stacktrace later
var error = new Error();
onScriptComplete = function (event) {
// avoid mem leaks in IE.
script.onerror = script.onload = null;
clearTimeout(timeout);
var chunk = installedChunks[chunkId];
if(chunk !== 0) {
if(chunk) {
var errorType = event && (event.type === 'load' ? 'missing' : event.type);
var realSrc = event && event.target && event.target.src;
error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
error.name = 'ChunkLoadError';
error.type = errorType;
error.request = realSrc;
chunk[1](error);
}
installedChunks[chunkId] = undefined;
}
};
var timeout = setTimeout(function(){
onScriptComplete({ type: 'timeout', target: script });
}, 120000);
script.onerror = script.onload = onScriptComplete;
document.head.appendChild(script);
}
}
// 执行完全部的 promise后再返回结果
return Promise.all(promises);
};
// expose the modules object (__webpack_modules__)
// 将模块列表放到 __webpack_require__ 的 m 属性上
__webpack_require__.m = modules;
// expose the module cache
// 将缓存列表放到 __webpack_require__ 的 c 属性上
__webpack_require__.c = installedModules;
// define getter function for harmony exports
// 在 exports 对象上定义 name 属性的 getter 方法
__webpack_require__.d = function(exports, name, getter) {
// 判断 exports 对象上是否有 name 属性
if(!__webpack_require__.o(exports, name)) {
// 在 exports 对象上添加 name 属性,可枚举为 true
// get 的值为 getter,当访问该属性时,该方法会被执行
Object.defineProperty(exports, name, { enumerable: true, get: getter });
}
};
// define __esModule on exports
// 在 exports 对象上定义一个 __esModule 属性,用来判断当前模块是否为 es6 模块
__webpack_require__.r = function(exports) {
// 若是当前浏览器支持 Symbol
if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
// 设置前
// console.log(exports.toString());// [object Object]
// 给 exports 对象类型设置为 Module
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
// 设置后
// console.log(exports.toString());// [object Module]
}
// 不然给 exports 对象添加一个表示 esm 的属性
Object.defineProperty(exports, '__esModule', { value: true });
};
// create a fake namespace object 建立一个命名空间对象
/ 为何要建立一个命名空间对象?
// 由于 import('xxx.js') 加载的 js,多是 esm ,也多是 cjs
// 因此须要兼容处理
// mode & 1: value is a module id, require it 若是值是模块ID,加载它
// mode & 2: merge all properties of value into the ns 把全部的属性合并到命名空间上 ns —— nameSpace
// mode & 4: return value when already ns object 当已是命名空间对象的话直接返回值
// mode & 8|1: behave like require 就像 require 同样
// mode 为何要用二进制来判断? 高效。节约内存
// linux 里面的权限判断也是用的二进制, 7 => 111 可读可写可执行
__webpack_require__.t = function(value, mode) {
// value 最开始是模块 ID
// 直接加载模块
if(mode & 1) value = __webpack_require__(value);
// 不用加载模块,直接返回模块内容
if(mode & 8) return value;
// 若是 value 已是一个对象而且 __esModule 属性为 true 的话就直接返回 value
if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
// 不然就建立一个空对象,加载这个对象,
var ns = Object.create(null);
// 在对象上设置 __esModule 属性为true
__webpack_require__.r(ns);
// 给 ns 对象定义一个 default 属性
Object.defineProperty(ns, 'default', { enumerable: true, value: value });
// 若是 mode 为2,而且 value 不是字符串,把值的全部属性都定义到 ns 对象上
if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
return ns;//{__esModule:true,default:'模块内容'}
};
// getDefaultExport function for compatibility with non-harmony modules
// 一个能获取模块内容的函数
__webpack_require__.n = function(module) {
// 若是是 __esModule,说明是 es6 模块,须要返回模块的 default 属性
// 若是不是,说明是 cjs 模块,直接返回模块自己
var getter = module && module.__esModule ?
function getDefault() { return module['default']; } :
function getModuleExports() { return module; };
//给 getter 添加一个 a 的属性,就是 getter 方法自己
__webpack_require__.d(getter, 'a', getter);
return getter;
};
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
// __webpack_public_path__
// 公开访问路径
__webpack_require__.p = "";
// on error function for async loading
// 加载异步 chunk 时的错误输出
__webpack_require__.oe = function(err) { console.error(err); throw err; };
// 第一次执行的时候,window["webpackJsonp"] 会是一个空数组
// jsonpArray 和 window["webpackJsonp"] 共同指向同一块内存地址
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
// 绑定 this,将老的数组的 push 方法始终指向 jsonpArray
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
// 若是不绑定 this 的话,那么在 webpackJsonpCallback 中执行 parentJsonpFunction(data) 的时候
// 就至关于执行了一个 “裸的”数组原生 的 push,data 不知道该添加给谁
// var oldJsonpFunction = jsonpArray.push;
//重写 jsonArray 的 push 方法,赋值为 webpackJsonpCallback
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
// 为何要保留老的数组的 push 方法?
// 避免 "重复发请求" 加载 chunk ,若是已经加载好了的,就拿来直接用
var parentJsonpFunction = oldJsonpFunction;
// 总结:
// 一、window["webpackJsonp"] 的 push 方法被重写,再也不是数组原生的方法,而是用来执行 jsonp 回调函数的
// 二、这时候若是想要给 window["webpackJsonp"] 这个数组添加数据时,就没法用 push 来添加了
// 三、因此这里多定义一个 jsonpArray 数组,它和 window["webpackJsonp"] 共同指向同一块内存地址
// 四、经过给 jsonpArray 添加(push)数据,那么相应的 window["webpackJsonp"] 就能获取到这些数据
// Load entry module and return exports
// 加载入口模块而且返回导出对象
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/************************************************************************/
/* src/ index.js sync-module.js async-module.js */
// webpack 打包后,会把引用模块的相对路径变成相对于 webpack.config.js 的相对路径
// 在 index.js 中 引入 "./sync-module.js" => 最终会变成 "./src/sync-module.js"
({
// key 是模块 ID ,value 是模块内容
"./src/index.js":
/*!**********************!*\ // 入口 chunk !*** ./src/index.js ***! \**********************/
/*! no exports provided */
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _sync_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sync-module */ "./src/sync-module.js");
console.log(_sync_module__WEBPACK_IMPORTED_MODULE_0__["logMsg"]);
let button = document.createElement('button');
button.innerHTML = '请点我';
button.addEventListener('click',()=>{
__webpack_require__.e(/*! import() | async-module */ "async-module")
.then(__webpack_require__.t.bind(null, /*! ./async-module.js */ "./src/async-module.js", 7))
.then(result=>{// result = {__esModule:true,default:'模块内容'}
console.log(result.default);
});
});
document.body.appendChild(button);
}),
"./src/sync-module.js":
/*!****************************!*\ !*** ./src/sync-module.js ***! // 入口 chunk 依赖的同步模块 \****************************/
/*! exports provided: logMsg */
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "logMsg", function() { return logMsg; });
function logMsg() {
console.log('我是同步模块');
}
})
});复制代码
(function(modules) { // webpack 的启动代码自执行函数
// The module cache 模块的缓存
var installedModules = {};
// The require function webpack本身实现了一个require方法
function __webpack_require__(moduleId) {
// Check if module is in cache 判断一下这个模块ID是否在缓存中
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;//若是有,说明此模块加载过,直接返回导出对象exports
}
// Create a new module (and put it into the cache)
// 建立一个新的模块对象而且把它放到缓存中
var module = installedModules[moduleId] = {
i: moduleId,// 模块ID
l: false,//是否已经加载loaded false
exports: {} //导出对象,默认是一个空对象
};
// Execute the module function 执行此模块对应的方法,目的是给module.exports赋值
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded 把模块设置为已加载
module.l = true;
// Return the exports of the module 返回模块的导出对象
return module.exports;
}
// the startup function
function startup() {
// Load entry module and return exports
// 加载入口模块而且返回导出对象
return __webpack_require__("./src/index.js");
}
// run startup 执行启动方法
return startup();
})
({
"./src/hello.js":
(function(module) {
module.exports = "hello";
}),
"./src/index.js":
(function(__unusedmodule, __unusedexports, __webpack_require__) {
let hello = __webpack_require__( "./src/hello.js");
console.log(hello);
})
});复制代码
Javascript 代码中的语法单元主要包括如下这么几种
const
、let
、var
等const babylon = require('@babel/parser');
// @babel/core 里面内置了 babylon/parser,也能够用它来转换 AST
const babel = require('@babel/core');
let types = require('@babel/types');
let generate = require('@babel/generator').default;
let traverse = require('@babel/traverse').default;
const originalSource = "const a = (a, b) => a + b;";
// 将 当前模块 的内容转换成 AST
const ast = babylon.parse(originalSource);
// @babel/core 里面内置了 babylon/parser,也能够用它来转换 AST
// const ast = babel.parse(originalSource);
// 遍历语法树,寻找要修改的目标节点
traverse(ast, {
// 若是当前节点是一个 箭头函数 时
ArrowFunctionExpression: (nodePath) => {
let node = nodePath.node;
let body = node.body;
if(!types.isBlockStatement(node.body)){
body = types.blockStatement([types.returnStatement(node.body)])
}
let newNode = types.functionExpression(null,node.params,body);
nodePath.replaceWith(newNode);
}
});
// 把转换后的抽象语法树从新生成代码
let {code} = generate(ast);
console.log('新的 code =>', code);复制代码
const babylon = require('@babel/parser');
let types = require('@babel/types');
let generate = require('@babel/generator').default;
let traverse = require('@babel/traverse').default;
const originalSource = `class Person{ constructor(name){ this.name = name; } getName(){ return this.name } }`;
// 将 当前模块 的内容转换成 AST
const ast = babylon.parse(originalSource);
// 遍历语法树,寻找要修改的目标节点
traverse(ast, {
// 若是当前节点是一个 class 时
ClassDeclaration: (nodePath) => {
let node = nodePath.node;
let bodys = node.body.body;
let id = node.id;
bodys = bodys.map(body => {
if (body.kind === 'constructor') {
return types.functionExpression(id, body.params, body.body)
} else {
let left = types.memberExpression(id, types.identifier('prototype'));
left = types.memberExpression(left, body.key);
let right = types.functionExpression(null, body.params, body.body);
return types.assignmentExpression('=', left, right);
}
});
nodePath.replaceWithMultiple(bodys);
}
});
// 把转换后的抽象语法树从新生成代码
let {code} = generate(ast);
console.log('新的 code =>', code);复制代码
developer.mozilla.org/zh-CN/docs/…