webpack学习
实现步骤
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 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.