1、新建一个项目（搭建架子）
npm init - y
复制代码需要以下几个文件
1、webpack.config.js 作为 options
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js', // 需要打包的文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
}
复制代码2、lib/webpack.js // 作为webpack的架子框架来扩展
const fs = require('fs')
module.exports = class webpack {
constructor(options) {
const { entry, output } = options
this.entry = entry
this.output = output
}
run() {
this.parse(this.entry) // 输出入口
}
parse(entryFile) {
const content = fs.readFileSync(entryFile, 'utf-8')
console.log(content) // 输出原本内容
}
}
复制代码3、bundle.js 通过此文件运行打包
const options = require('./webpack.config.js')
const Webpack = require('./lib/webpack')
new Webpack(options).run()
复制代码4、准备需要的打包文件
src/index.js
import { fuck } from './a.js'
console.log(fuck)
console.log('webpack -4.0xxxx！！！')
复制代码src/a.js
export const fuck = "fuck you"
复制代码通过上述代码我们就可以搭出一个webpack的架子
一个webpack的类，一份webpack的配置，需要打包的文件，还有执行打包的代码
我们将流程分为3部分
第一部分： parse过程 主要读取打包文件内容，通过babel库我们解析每个文件的导入语句，我们获取每个文件的加载映射
比如 main.js 文件 中 import a.js 还有 b.js 文件，那么我们要生成 一个依赖映射
用一个对象保存
{
'main.js': {
yilai: {
'./a.js' : '这里存相对入口的路径,
'./b.js' : '这里存相对入口的路径'
}
}
}
复制代码第二部分：traverse 转义代码， 生成浏览器可执行的文件内容。把 import 转化为 require 的语法
第三部分： 生成打包后的文件， 主要处理 require 函数加载其他文件的函数
2、首先目标是扩展webpack类 的 parse 函数
class webpack {
// ...
parse(entryFile) {
const content = fs.readFileSync(entryFile, 'utf-8')
console.log(content) // 输出原本内容
}
}
复制代码对代码解析第一件事：
1、转义成ast 树
我们引用 @babel/parse ，我们可以通过它来转义成 ast
const parser = require('@babel/parser')
// content 读取到的文件内容
const ast = parser.parse(content, {
sourceType: 'module', // es6
})
复制代码ast 的内容是一个node类型的对象
{
type: 'File',
start: 0,
end: 86,
loc:
SourceLocation {
start: Position { line: 1, column: 0 },
end: Position { line: 4, column: 0 },
filename: undefined,
identifierName: undefined },
// ...
program: // 第一层 关注这里
{
type: 'Program',
start: 0,
end: 86,
//....
body: [ [Node], [Node], [Node] ], // 第二层 关注这里
}
}
复制代码ast.program.body 数组内的对象是行对代码的解析
有type: 'ImportDeclaration', 导入语句 表达式等等
对代码解析成第二件事：
2、traverse 对代码转换过程
traverse(ast, null, options) 可以找到导入语句
console.log('traverse----------:')
const traverse = require('@babel/traverse').default
const yilai = {}
const prePath = path.dirname(entryFile)
traverse(ast, {
ImportDeclaration({ node }) {
console.log(node) // 过滤出来 type 为 ImportDeclaration 节点
// 要的 node.source.value
// 对路径做拼接
const newPath = './' + path.join(prePath, node.source.value)
yilai[node.source.value] = newPath.replace('\\', '/') // 收集路径
},
})
console.log('yilai：' + yilai) // {'./a.js'： './src/a.js'} 得到相对于入口文件的路径
复制代码对代码解析成第三件事：
2、把ast 解析成想要得代码
const { code } = transformFromAst(ast, null, {
presets: ['@babel/preset-env'],
})
console.log('code:-----------')
console.log(code)
return {
entryFile,
yilai,
code,
}
复制代码此时转义后的代码会成这样
var _a = require("./a.js"); // 这块 语法浏览器 还是解析不了，毕竟是node的
console.log(_a.fuck);
console.log('webpack -4.0xxxx！！！');
复制代码汇总后的代码：
class webpack {
// ...
parse(entryFile) {
const content = fs.readFileSync(entryFile, 'utf-8')
const ast = parser.parse(content, {
sourceType: 'module', // es6
})
// 实际要的是 ast.program.body ===> [ [Node], [Node], [Node] ] 行代码
const yilai = {}
const prePath = path.dirname(entryFile)
traverse(ast, {
ImportDeclaration({ node }) {
console.log(node) // 过滤出来 type 为 ImportDeclaration 节点
// 要的 node.source.value
// 对路径做拼接
const newPath = './' + path.join(prePath, node.source.value)
yilai[node.source.value] = newPath.replace('\\', '/')
},
})
// 得到编译后的代码
const { code } = transformFromAst(ast, null, {
presets: ['@babel/preset-env'],
})
// 返回
return {
entryFile,
yilai,
code,
}
}
}
复制代码3、扩展 generateCode 函数
首先我们得明白run做了什么
run() {
const info = this.parse(this.entry)
this.modules.push(info)
for (let i = 0; i < this.modules.length; i++) {
const item = this.modules[i]
const { yilai } = item
if (yilai) {
for (let j in yilai) {
this.modules.push(this.parse(yilai[j]))
}
}
}
const obj = {}
this.modules.forEach((item) => {
obj[item.entryFile] = item
})
console.log(obj) // 此时获得了 图谱
// 通过parse 形成 映射
// 对象中的key 是 相对入口的路径
// value： {
// yilai： 文件加载 url到 相对入口文件的路径的映射
// code：'真实代码的字符串'
// }
this.gennerateCode(obj) // 生成代码和创建bundle文件
}
复制代码gennerateCode 实现
const filePath = path.join(this.output.path, this.output.filename) // 输出文件目录和名
const content = `(function (modules) {
// 加载函数
function require(module) {
function newRequire(relativePath) {
// .a.js => ./src/a.js
return require(modules[module].yilai[relativePath])
}
const exports = {}; // 这个分号缺了就报错了，会和下面自执行函数连起来报错
// require 重载，这样加载的url就是对的了
(function(require, code) {
eval(code)
})(newRequire, modules[module].code)
return exports
}
return require('${this.entry}') /* ./src/index.js */
})(${JSON.stringify(obj)})`
fs.writeFileSync(filePath, content, 'utf-8')
复制代码完整代码清单
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const path = require('path')
const fs = require('fs')
const { transformFromAst } = require('@babel/core')
module.exports = class webpack {
constructor(options) {
const { entry, output } = options
this.entry = entry
this.output = output
this.dir = path.dirname(this.entry)
this.modules = []
}
run() {
const info = this.parse(this.entry)
this.modules.push(info)
for (let i = 0; i < this.modules.length; i++) {
const item = this.modules[i]
const { yilai } = item
if (yilai) {
for (let j in yilai) {
this.modules.push(this.parse(yilai[j]))
}
}
}
const obj = {}
this.modules.forEach((item) => {
obj[item.entryFile] = item
})
console.log(obj) // 此时获得了 图谱
this.gennerateCode(obj) // 生成代码和创建bundle文件
}
parse(entryFile) {
const content = fs.readFileSync(entryFile, 'utf-8')
const ast = parser.parse(content, {
sourceType: 'module', // es6
})
// 实际要的是 ast.program.body ===> [ [Node], [Node], [Node] ] 行代码
const yilai = {}
const prePath = path.dirname(entryFile)
const currentPath = traverse(ast, {
ImportDeclaration({ node }) {
// console.log(node) // 过滤出来 type 为 ImportDeclaration 节点
// 要的 node.source.value
// 对路径做拼接
const newPath = './' + path.join(prePath, node.source.value)
yilai[node.source.value] = newPath.replace(/\\/g, '/')
},
})
const { code } = transformFromAst(ast, null, {
presets: ['@babel/preset-env'],
})
return {
entryFile,
yilai,
code,
}
}
gennerateCode(obj) {
const filePath = path.join(this.output.path, this.output.filename) // 输出文件目录和名
const content = `(function (modules) {
// 加载函数
function require(module) {
function newRequire(relativePath) {
// .a.js => ./src/a.js
return require(modules[module].yilai[relativePath])
}
const exports = {};
(function(require, code) {
eval(code)
})(newRequire, modules[module].code)
return exports
}
return require('${this.entry}') /* ./src/index.js */
})(${JSON.stringify(obj)})`
fs.writeFileSync(filePath, content, 'utf-8')
}
}
复制代码最后代码验证：
node bundle.js
复制代码结果生成文件 main.js
;(function (modules) {
// 加载函数
function require(module) {
function newRequire(relativePath) {
// .a.js => ./src/a.js
return require(modules[module].yilai[relativePath])
}
const exports = {};
(function (require, code) {
eval(code)
})(newRequire, modules[module].code)
return exports
}
return require('./src/index.js') /* ./src/index.js */
})({
'./src/index.js': {
entryFile: './src/index.js',
yilai: { './a.js': './src/a.js' },
code:
'"use strict";\n\nvar _a = require("./a.js");\n\nconsole.log(_a.fuck);\nconsole.log(\'webpack -4.0xxxx！！！\');',
},
'./src/a.js': {
entryFile: './src/a.js',
yilai: { './file/b.js': './src/file/b.js' },
code:
'"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.fuck = void 0;\n\nvar _b = require("./file/b.js");\n\nconsole.log(_b.hello);\nvar fuck = \'fuck you\';\nexports.fuck = fuck;',
},
'./src/file/b.js': {
entryFile: './src/file/b.js',
yilai: {},
code:
'"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.hello = void 0;\nvar hello = \'hello world\';\nexports.hello = hello;',
},
})
复制代码
