详细实现收录在https://github.com/jdkwky/webstudydeep/tree/webstudydeep/webpackstudy 中，主要以webpack03、webpack04、pwebpack文件为主，如果觉得对您有帮助欢迎给个star。
npm link
使用 npm link 创建自己本地开发包然后通过npm link modelName 引入到需要引用该模块的项目中
举例：
pwebpack 是我们的本地打包js文件的项目，当前pwebpack是空项目；
- cd pwebpack & npm init;
- package.json 中的name字段为"pwebpack"（name字段可以更改但是后面引入的包名也会跟着这个名字的改变而改变）
- package.json 中 加入 "bin":"./bin/pwebpack.js";
- 在"./bin/pwebpack.js"文件中写如下代码
#! /usr/bin/env node
// 作用 是告诉系统此文件用node执行 并且引用那个环境下的node模块
console.log('start');
- 在需要引入pwebpack包中的文件中执行 npm link pwebpack;
- 测试 npx pwebpack; 输出 "start" 即成功，修改一下pwebpack.js文件中的输出字段，重新npx pwebpack一下更新新的数据。
手写简易版 webpack
- 入口文件
const path = require('path');
// 获取配置文件内容
const config = require(path.resolve('webpack.config.js'));
// 引用编译类
const Compiler = require('../lib/Compiler.js');
// 创建对象
const compiler = new Compiler(config);
// 调用run 方法
compiler.run();
- Compiler 类
const path = require('path');
const fs = require('fs');
const babylon = require('babylon');
const traverse = require('@babel/traverse').default;
const types = require('@babel/types');
const generator = require('@babel/generator').default;
const ejs = require('ejs');
const { SyncHook } = require('tapable');
class Compiler {
constructor(config) {
this.config = config || {};
// 保存所有模块依赖
this.modules = {};
// 入口文件
this.entry = config.entry;
this.entryId = '';
// 工作目录
this.root = process.cwd();
}
// 获取资源
getSource(modulePath) {
let content = fs.readFileSync(modulePath, 'utf8');
return content;
}
// 解析语法
parse(source, parentPath) {
// AST 语法树解析
const ast = babylon.parse(source);
// 依赖的数组
const dependencies = [];
traverse(ast, {
CallExpression(p) {
const node = p.node;
if (node.callee.name == 'require') {
node.callee.name = '__webpack_require__';
let moduleName = node.arguments[0].value;
moduleName =
moduleName + (path.extname(moduleName) ? '' : '.js'); // ./a.js
moduleName = './' + path.join(parentPath, moduleName); // ./src/a/js
dependencies.push(moduleName);
node.arguments = [types.stringLiteral(moduleName)]; // 改掉源码
}
}
});
const sourceCode = generator(ast).code;
return { sourceCode, dependencies };
}
// 构建模块
buildModule(modulePath, isEntry) {
// 模块路径 是否是入口文件
// 拿到模块内容
const source = this.getSource(modulePath);
// 获取模块id 需要相对路径
const moduleName = './' + path.relative(this.root, modulePath);
if (isEntry) {
this.entryId = moduleName;
}
// 解析代码块
const { sourceCode, dependencies } = this.parse(
source,
path.dirname(moduleName)
);
this.modules[moduleName] = sourceCode;
dependencies.forEach(dep => {
this.buildModule(path.join(this.root, dep), false);
});
}
// 发射文件
emitFile() {
// 输出到哪个目录下
let main = path.join(
this.config.output.path,
this.config.output.filename
);
let templateStr = this.getSource(path.join(__dirname, 'main.ejs'));
let code = ejs.render(templateStr, {
entryId: this.entryId,
modules: this.modules
});
// 可能打包多个
this.assets = {};
// 路径对应的代码
this.assets[main] = code;
fs.writeFileSync(main, this.assets[main]);
}
// 运行
run() {
// 执行创建模块的依赖关系
// 得到入口文件的绝对路径
this.buildModule(path.resolve(this.root, this.entry), true);
this.emitFile();
}
}
- 添加简易版 loader plugin（简易版都是同步钩子）解析
构造函数constructor函数中
// 插件
this.hooks = {
entryOption: new SyncHook(),
compile: new SyncHook(),
afterCompile: new SyncHook(),
afterPlugins: new SyncHook(),
run: new SyncHook(),
emit: new SyncHook(),
done: new SyncHook()
};
// 解析plugins 通过tapable
const plugins = this.config.plugins;
if (Array.isArray(plugins)) {
plugins.forEach(plugin => {
plugin.apply(this);
});
}
this.hooks.afterPlugins.call();
getSource函数中
// 解析loader
const rules = this.config.module.rules || [];
for (let i = 0; i < rules.length; i++) {
let rule = rules[i];
const { test, use } = rule || {};
let len = use.length;
if (test.test(modulePath)) {
// 需要通过 loader 进行转化
while (len > 0) {
let loader = require(use[--len]);
content = loader(content);
}
}
}
plugin 中 tapable钩子
同步钩子
const { SyncHook } = require('tapable');
const hook = new SyncHook(['name']);
hook.tap('hello', name => {
console.log(`hello ${name}`);
});
hook.tap('Hello again', name => {
console.log(`Hello ${name},again`);
});
hook.call('wky');
// 输出 hello wky , Hello wky , again
简易版实现
class SyncHook {
constructor() {
this.tasks = [];
}
tap(name, fn) {
this.tasks.push(fn);
}
call(...args) {
this.tasks.forEach(task => {
task(...args);
});
}
}
const hook = new SyncHook(['name']);
hook.tap('hello', name => {
console.log(`hello ${name}`);
});
hook.tap('Hello again', name => {
console.log(`Hello ${name},again`);
});
hook.call('wky');
SyncBailHook 熔断性执行
const { SyncBailHook } = require('tapable');
const hook = new SyncBailHook(['name']);
hook.tap('node', function(name) {
console.log('node', name);
return '停止学习';
});
hook.tap('react', function(name) {
console.log('react', name);
});
hook.call('wky');
// node wky 停止学习， 就不会返回执行下面的代码
实现原理
class SyncBailHook {
constructor() {
this.tasks = [];
}
tap(name, fn) {
this.tasks.push(fn);
}
call(...args) {
let index = 0,
length = this.tasks.length,
tasks = this.tasks;
let result;
do {
result = tasks[index](...args);
index++;
} while (result == null && index < length);
}
}
const hook = new SyncBailHook(['name']);
hook.tap('node', function(name) {
console.log('node', name);
return '停止学习';
});
hook.tap('react', function(name) {
console.log('react', name);
});
hook.call('wkyyc');
同步瀑布钩子(上一个监听函数的值会传递给下一个监听函数)
const { SyncWaterfallHook } = require('tapable');
const hook = new SyncWaterfallHook(['name']);
hook.tap('node', function(name) {
console.log('node', name);
return 'node 学的还不错';
});
hook.tap('react', function(data) {
console.log('react', data);
});
hook.call('wky');
实现原理
class SyncWaterfallHook {
constructor() {
this.tasks = [];
}
tap(name, fn) {
this.tasks.push(fn);
}
call(...args) {
const [firstFn, ...others] = this.tasks;
others.reduce((sum, task) => task(sum), firstFn(...args));
}
}
const hook = new SyncWaterfallHook(['name']);
hook.tap('node', function(name) {
console.log('node', name);
return 'node 学的还不错';
});
hook.tap('react', function(data) {
console.log('react', data);
});
hook.call('wkyyc');
异步钩子， 并行执行的异步钩子，当注册的所有异步回调都并行执行完毕之后再执行callAsync或者promise中的函数
const { AsyncParallelHook } = require('tapable');
const hook = new AsyncParallelHook(['name']);
hook.tapAsync('hello', (name, cb) => {
setTimeout(() => {
console.log(`hello ${name}`);
cb();
}, 1000);
});
hook.tapAsync('hello again', (name, cb) => {
setTimeout(() => {
console.log(`Hello ${name} again`);
cb();
}, 2000);
});
hook.callAsync('wkyyc', () => {
console.log('end');
});
实现原理
class AsyncParallelHook {
constructor() {
this.tasks = [];
}
tapAsync(name, fn) {
this.tasks.push(fn);
}
callAsync(...args) {
// 要最后执行的函数
const callbackFn = args.pop();
let index = 0;
const next = () => {
index++;
if (index == this.tasks.length) {
callbackFn();
}
};
this.tasks.forEach(task => {
task(...args, next);
});
}
}
const hook = new AsyncParallelHook(['name']);
hook.tapAsync('hello', (name, cb) => {
setTimeout(() => {
console.log(`hello ${name}`);
cb();
}, 1000);
});
hook.tapAsync('hello again', (name, cb) => {
setTimeout(() => {
console.log(`Hello ${name} again`);
cb();
}, 3000);
});
hook.callAsync('wkyyc', () => {
console.log('end');
});
异步串行执行
const { AsyncSeriesHook } = require('tapable');
const hook = new AsyncSeriesHook(['name']);
hook.tapPromise('hello', name => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`hello ${name}`);
resolve();
}, 1000);
});
});
hook.tapPromise('hello again', data => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`Hello ${data} again`);
resolve();
}, 1000);
});
});
hook.promise('wkyyc').then(() => {
console.log('end');
});
实现原理
class AsyncSeriesHook {
constructor() {
this.tasks = [];
}
tapPromise(name, fn) {
this.tasks.push(fn);
}
promise(...args) {
const [firstFn, ...others] = this.tasks;
return others.reduce(
(sum, task) =>
sum.then(() => {
return task(...args);
}),
firstFn(...args)
);
}
}
const hook = new AsyncSeriesHook(['name']);
hook.tapPromise('hello', name => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`hello ${name}`);
resolve();
}, 1000);
});
});
hook.tapPromise('hello again', data => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`Hello ${data} again`);
resolve();
}, 1000);
});
});
hook.promise('wkyyc').then(() => {
console.log('end');
});