手写webpack——实现loader的功能

最新推荐文章于 2024-05-09 09:56:20 发布

rookieLink

最新推荐文章于 2024-05-09 09:56:20 发布

阅读量520

点赞数

分类专栏： webpack系列文章标签： webpack 手写webpack加载 loader加载原理实现

本文链接：https://blog.csdn.net/zf2014122891/article/details/104565572

版权

实现loader

zf-pack.js

let fs = require('fs');
let path = require('path');
let babylon = require('babylon');
let traverse = require('@babel/traverse').default;
let t = require('@babel/types');
let generator = require('@babel/generator').default;
let ejs = require('ejs');
// babylon 主要就是把源码转换成ast
// @babel/traverse
// @babel/types
// @babel/generator
class Compiler {
   
    constructor(config) {
   
        // entry output
        this.config = config;
        // 需要保存入口文件的路径
        this.entryId;
        // 需要保存所有得到依赖模块
        this.modules = {
   };
        this.entry = config.entry;
        // 工作路径
        this.root = process.cwd();
    }

    // 解析源码
    parse(source, parentPath) {
    // AST解析语法树
        let ast = babylon.parse(source);
        // console.log(ast);
        let dependencies = []; // 依赖的数组
        traverse(ast, {
   
            CallExpression(p) {
   
                let node = p.node;  // 对应的节点
                if (node.callee.name =