1.新建一个目录,比如webpack,新建src、lib、dist文件夹,在根目录下新建bundle.js、 webpack.config.js 文件,在lib下新建webpack.js 文件, 在src下面新建expo.js、index.js.
2.执行 npm -y (初始化package.json文件. -y 表示同意所有默认配置)/n
3.安装@babel/parse、@babel/traverse --save、 @babel/preset-env npm install @babel/parse -S /n npm install @babel/traverse --save npm i @babel/core @babel/preset-env --save
4.编写内容
// index.js
import { add } from './expo.js';
add (1,2);
console.log('hello webpck');
// webpack.config.js
const path = require('path');
module.exports = {
entery:'./src/index.js',
mode:'development',
output:{
path: path.resolve(__dirname,'./dist'),
filename:'main.js'
}
}
// src/expo.js
export const add = function (a,b) {
return a +b;
};
export const minus = function (a,b) {
return a+b;
};
// bundle.js
//! 拿到webpack的配置文件
const options = require('./webpack.config.js');
const Webpack = require('./lib/webpack.js')
new Webpack(options).run();
// lib/webpak.js
const fs = require('fs');
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default;
const path = require('path');
const { transformFromAst } = require('@babel/core')
module.exports = class Webpack {
constructor (options) {
const {entery , output } = options;
this.entery = entery;
this.output = output;
this.modules = [];
}
run () {
const info = this.parse(this.entery);
// 处理其他模块
this.modules.push(info)
for(let i=0;i<this.modules.length;i++) {
console.log('执行循环')
const item = this.modules[i];
const { dependencies } = item;
console.log(dependencies)
console.log('888')
if(dependencies) {
for(let j in dependencies) {
this.modules.push(this.parse(dependencies[j]));
}
}
}
console.log(this.modules)
// 转对象结构
const obj = {};
this.modules.forEach((item)=>{
obj[item.enteryFile] = {
dependencies:item.dependencies,
code:item.code
}
});
console.log(obj)
this.file(obj);
}
parse (enteryFile) {
// 分析入口模块的内容
const content = fs.readFileSync(enteryFile,'utf-8');
// 分析哪些是依赖
// 把内容通过parser 抽象成语法书 便于分析提取
const ast = parser.parse(content,{
sourceType:'module',
})
const dependencies = {};
traverse(ast,{
ImportDeclaration({ node }) {
const currentPath = path.dirname(enteryFile);
const newPathName = './' + path.join(
currentPath,
node.source.value
)
dependencies[node.source.value] = newPathName ;
}
});
// 处理内容,转化ast
const { code } = transformFromAst(ast,null, {
presets:['@babel/preset-env']
})
return {
enteryFile,
code,
dependencies
}
// console.log(ast.program.body)
}
file (code) {
// 生成boundle.js => ./dist/main.js
const filePath =path.join(this.output.path,this.output.filename) ;
const newCode = JSON.stringify(code);
// graph 依赖图谱
// {
// './src/index.js': {
// dependencies: { './expo.js': './src/expo.js' },
// code: '"use strict";\n' +
// '\n' +
// 'var _expo = require("./expo.js");\n' +
// '\n' +
// '(0, _expo.add)(1, 2);\n' +
// "console.log('hello webpck');"
// },
const bundle = `(function (graph) {
function require(module) {
function localRequire (relativePath) {
return require(graph[module].dependencies[relativePath])
}
var exports = {};
(function (require,exports,code){
eval(code)
}) (localRequire,exports,graph[module].code);
return exports;
}
require('${this.entery}')
})(${newCode})`;
fs.writeFileSync(filePath,bundle,'utf-8');
}
}
原理:
1.先将文件目录解析存起来.利用parse将文件目录抽象成语法树,把所有的依赖遍历存起来,最后生成main.js.以文件的目录作为key,文件的依赖作为value.
