30.Webpack-入口文件

前言：我当前调试的webapck版本是5.58.1，不知道怎么开始调试的看过来->调试方法。

准备工作：

• 准备一个正常的webpack项目，很简单的就可以
• 新建webpack.config.js配置文件，随意配置
• 调试准备见上面前言内容中的链接

接下来，进入正文...

首先执行webpack命令，执行的是node_modules.bin\webpack./node_modules/.bin/webpack这个shell脚本，这个脚本去调用./node_modules/webpack/bin/webpack.js并追加输入参数，生成最终的配置文件。

• 1、执行webpack main.js进入调试界面->入口进入到node_modules\webpack\lib\webpack.js这个文件中去（主要是做一些准备工作，依赖于webpack-cli&webpack-command，在此判断是否安装webpack-cli）

const path = require("path");
    const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
    // eslint-disable-next-line node/no-missing-require
    const pkg = require(pkgPath);
    // eslint-disable-next-line node/no-missing-require
//引入webpack-cli模块->接下来进入到webpack-cli/cli.js文件中
    require(path.resolve(
        path.dirname(pkgPath),
        pkg.bin[installedClis[0].binName]
    ));

• 2、node_modules\webpack-cli\bin\cli.js。在cli中创建一个webpack，将options传入，遍历配置项中的Plugins等，最后执行compiler.run(callback)方法

//自定义的配置文件内容
const firstOptions = [].concat(options)[0];
//命令行传参内容
let outputOptions = options.stats;
//最终会合并配置项，将所有的配置项合并到options中

//引入webpack->用来创建一个compiler
const webpack = require("webpack");
//将所有的配置项传入
compiler = webpack(options);

• 3、node_modules\webpack\lib\webpack.js中

let compiler;
compiler = new Compiler(options.context);
compiler.options = options;
//盲猜是对插件的操作-遍历所有的插件
        if (options.plugins && Array.isArray(options.plugins)) {
            for (const plugin of options.plugins) {
                if (typeof plugin === "function") {
                    plugin.call(compiler, compiler);
                } else {
                    //讲plugin的this绑定到compiler上
                    plugin.apply(compiler);
                }
            }
        }
//最后执行compiler.run方法
compiler.run(callback);

结论：webpack打包，其实就是使用webpack函数来接收config，然后调用run方法。

最后证明一下确实是走了这么一个流程：

在刚才的项目下新建一个run.js文件，运行node run.js会打印出来11111

//引入webpack和配置信息
const webpack = require("webpack");
const config = require("./webpack.config");
//调用webpack方法，传入配置信息

const compiler = webpack(config);
//调用compiler.run方法
compiler.run((err, stats) => {
  console.log(11111);
});

image-20220104222023493.png

想直接扒代码的同学->git链接