关于webpack:webpack-核心-Compiler-实现系列一

webpack 外围 Compiler 实现

Compiler 类是 webpack的运行入口，每次打包时，会生成一个实例，外面挂载了许多打包的数据，在这里简化了构造，力求理解关键性打包流程

1. Compiler类初始化

1. 解析 import 语句
2. 保留依赖图
3. 生成入口代码

/**
 * 1. 定义 Compiler 类
 */

class Compiler {
    constructor(options) {
        const { entry, output } = options;

        this.entry = entry;
        this.output = output;
        this.modules = [];
    }
    // 构建启动
    run(){}
    // 重写 require 函数，输入 Bundle
    generate() {}
}

2. Compiler 中的import导入解析

webpack.config.js

const path = require('path')

module.exports = {
    // entry: path.resolve(__dirname, './src/index.js'),
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js'
    }
}

compiler.js

/**
 * 2. 解析入口文件，获取 AST
 */
const fs = require('fs');
const parser = require('@babel/parser');
const options = require('../webpack.config');

const Parser = {
    getAst: path => {
        // 读取入口文件
        const content = fs.readFileSync(path, 'utf-8');
        // 将文件内容转为AST形象语法树
        return parser.parse(content, {
            sourceType: 'module'
        })
    }
}

class Compiler {
    constructor(options) {
        const { entry, output } = options;

        this.entry = entry;
        this.output = output;
        this.modules = [];
    }
    // 构建启动
    run() {
        const ast = Parser.getAst(this.entry);
        console.log(Object.keys(ast));
        console.log(ast);
    }
    // 重写 require函数，输入 bundle
    generate() {

    }
}

new Compiler(options).run();