深入理解webpack打包机制(二)

可以使用npx my-pick命令后，我们就可以在my-pick中编写自己的webpack:

webpack.config.js中导出的是一个对象，这个对象是webpack的配置参数。说白了，导出对象的入口 出口 module plugins...什么的 全是webpack参数中的其中一个。那webpack就可以理解为一个很大的函数，把参数传递进去 返回结果。

1 在bin同级目录 创建lib目录，用来存放打包的核心的配置文件 -> mkdir lib -> cd /lib -> touch Compiler.js

2 在my-pick.js中引入webpack.config.js的配置

#! /usr/bin/env node

let path = require('path');

let config = require(path.resolve('webpack.config.js'));

let Compiler = require('../lib/Compiler');

let compiler = new Compiler(config);

compiler.run();

在my-pick.js中， 首先通过path模块引入了webpack.config.js，其次 又引入了lib/Compiler.js,

不难发现，Compiler是一个类，并且通过new，new出了Compiler的实例对象compiler。最后执行compiler的run()方法。

3 接下来就要在lib/Compiler.js中新建Compiler类

let path = require('path');
let fs = require('fs');

class Compiler{
    constructor(config){
        this.config = config;
        this.entry = config.entry;
        this.entryId = '';
        this.modules = {};
        this.rootPath = process.cwd();
    }
    run(){
        this.buildModule(path.reaolve(this.rootPath,this.entry),true);
        this.emit();
    }
    buildModule(modulePath, isEntry){
        
    }
    emit(){

    }
}

module.exports = Compiler;

constructor中传入了刚才获取到的webpack.config.js的配置对象config，拿到配置中的入口entry，entryId用来存放主入口，modules对象用来存放依赖key和源码value，rootPath是当前工作路径，类似于dirname。 原型上添加了run方法，run方法内部又执行了buildModule()和emit()方法。buildModule方法的作用是通过传入的路径，获取到文件源码，解析模块之间的依赖(不是它的主要作用)。emit方法作用是把最后解析好的源码和依赖关系发射出去。

下面开始写buildModule()方法：

let path = require('path');
let fs = require('fs');

class Compiler{
    constructor(config){
        this.config = config;
        this.entry = config.entry;
        this.entryId = '';
        this.modules = {};
        this.rootPath = process.cwd();
    }
    run(){
        this.buildModule(path.resolve(this.rootPath,this.entry),true);
        this.emit();
    }
    buildModule(modulePath, isEntry){
        let source = this.getSource(modulePath);
        let moduleName = './'+path.relative(this.rootPath,modulePath);
        if(isEntry){ this.entryId = moduleName };
        let { sourceCode, dependencies } = this.parse(source, path.dirname(moduleName));
    }
    getSource(sourcePath){
        return fs.readFileSync(sourcePath,'utf8');
    }
    emit(){

    }
}


module.exports = Compiler;

buildModule()传入了两个参数。第一个参数是文件的路径，在本次代码中是主入口路径，但是之后不一定是主入口的路径。第二个参数是判断该路径是否为主入口的表示，true表示是主入口，false表示不是主入口。很显然，本次调用的buildModule()函数是主入口，所以第二个参数传递的是true。

buildModule函数第一行表示根据路径获取到源码，根据单独写的this.getSource()方法。第二行是把传入的绝对路径转换为相对路径。第三行是判断是否是主入口，是的话就把该路径保存到主入口entryId中。第四行中又多了一个parse()方法,parse()方法返回了源码sourceCode和依赖dependencies。它是核心方法，这个函数传入了源码和路径，注意这个路径是父级路径，path.dirname()。比如 原路径是‘./src/index.js’,父路径就是'./src'。为什么这样写，待会在parse()中会体现出来。

未完待续...