浅析webpack源码之convert-argv模块（二）

lemon 发布于2019-08-23 14:38 / 2265人阅读

摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧

打开webpeck-cli下的convert-argv.js文件

// 定义options为空数组
 const options = [];
 // webpack -d 检查 -d指令
  if (argv.d) { 
      //...
  }
  // webpack -p
  if (argv.p) {
      //...
  }
  if (argv.output) {
      //...
  }
   //...
   /*如果有 --config   --config webpack.config.js   config就是webpack.config.js
    可以这样理解 
    "dev": "webpack-dev-server --inline --progress --hot --config webpack.config.js",当我们npm run dev的时候执行这段
    package.json的内容 此时有config读取webpack.config.js的内容 当我们npm run build时 执行 "webpack" 此时没有config走else分支*/
    if (argv.config) {
        // ... 获取文件
    }else{
        /*读取默认配置 ts co 等后缀类
         defaultConfigFiles是 数组[{ path:
         "/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
         ext: ".js"
         },{path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.ts", ext: ".ts"},{},...] */
        for (i = 0; i < defaultConfigFiles.length; i++) {
            const webpackConfig = defaultConfigFiles[i].path;
            // 读取文件,如果有的话push推进去
            if (fs.existsSync(webpackConfig)) {
                configFiles.push({
                    path: webpackConfig,
                    ext: defaultConfigFiles[i].ext
                });
                //     最终结果configFiles is the Array [ { path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
                //  ext: ".js" } ]
                break;
            }
        
        }
    }

process.cwd() 是node.js里读取文件路径的一个API

//configFiles长度大于0时
if (configFiles.length > 0) {
    // ...
    const requireConfig = function requireConfig(configPath) {
        // 这是局部options不要和全局的options数组混淆
        let options = (function WEBPACK_OPTIONS() {
            if (argv.configRegister && argv.configRegister.length) {
                module.paths.unshift(
                    path.resolve(process.cwd(), "node_modules"),
                    process.cwd()
                );
                argv.configRegister.forEach(dep => {
                    require(dep);
                });
                return require(configPath);
            } else {
                // 读取路径下的文件内容返回
                return require(configPath);
            }
        })();
        // 预处理options，options若是数组的话，处理成对象之类的
        options = prepareOptions(options, argv);
        return options;
    };
    configFiles.forEach(function(file) {
            /// interpret.extensions[.js]为null
            // 这里直接跳出
            registerCompiler(interpret.extensions[file.ext]);
            // options这里是全局options空数组 
            options.push(requireConfig(file.path));
        });
        // configFileLoaded 加载完毕
        configFileLoaded = true;
     }

     // 如果没有加载完毕，调用函数传递空数组
    if (!configFileLoaded) {
        return processConfiguredOptions({});
    } else if (options.length === 1) {
       // 如果只有一个，把仅有的传进去 
        return processConfiguredOptions(options[0]);
    } else {
        // 传options
        return processConfiguredOptions(options);
    }

注意了，这里有一个return 也就是这个convert-argv模块的最终返回结果，函数到这里就结束了。接下来我看看一下processConfiguredOptions函数

我们先按照npm run build分支走options.length为1,读取options[0]是webpack.config.js里的module.exports ={} 对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧

超融合服务器混合云源码浅析源码中文说明之源码编译模块 linux 模块源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100912.html

浅析webpack源码之前言（一）

为什么读webpack源码因为前端框架离不开webpack，天天都在用的东西啊，怎能不研究读源码能学到很多做项目看书学不到的东西，比如说架构，构造函数，es6很边缘的用法，甚至给函数命名也会潜移默化的影响等想写源码，不看源码怎么行，虽然现在还不知道写什么，就算不写什么，看看别人写的总可以吧知道世界的广阔，那么多插件，那么多软件开发师，他们在做什么，同样是写js的，怎么他们能这么伟大好奇...

suosuopuo 2019-08-23 14:49 评论0 收藏0
webpack源码之运行流程

摘要：引言通过前面几张的铺垫下面开始分析源码核心流程大体上可以分为初始化编译输出三个阶段下面开始分析初始化这个阶段整体流程做了什么启动构建，读取与合并配置参数，加载，实例化。推荐源码之源码之机制源码之简介源码之机制参考源码引言通过前面几张的铺垫,下面开始分析webpack源码核心流程,大体上可以分为初始化,编译,输出三个阶段,下面开始分析初始化这个阶段整体流程做了什么? 启动构建，读...

kviccn 2019-08-22 16:04 评论0 收藏0
浅析webpack源码之WebpackOptionsApply 模块(七)

摘要：还做了处理，是之所以能根据变化自己更新的核心，好凌乱，我们先从那个坑跳出来进入这个大坑进入这个页面看到前面一大堆的模块引入，已经给跪了，但是马马虎虎的完成也比放弃好前面一大堆的引入，主要是下和文件夹下的模块父类就只是定义了接口主要核心在方法 NodeEnvironmentPlugin还做了watch处理，NodeWatchFileSystem是webpack之所以能根据变化自己更新的核...

AaronYuan 2019-08-23 14:49 评论0 收藏0
浅析webpack源码之processOptions处理Options以及入口函数（三）

摘要：我们打开根据上次所返回的这个因为有了上次的基础，比较容易读了大体逻辑是这样的先定义一个空对象同上次的一个逻辑，还是一个目前的方式只有一个满足如果满足的会执行一系列函数这个函数直接结果是的影响是打比如如果满足的话当你的时候就会在页面上出我们打开bin/cli.js根据上次所返回的Options processOptions(options)这个因为有了上次的基础，比较容易读了,大体逻辑...

doodlewind 2019-08-23 14:45 评论0 收藏0
浅析webpack源码之NodeEnvironmentPlugin模块总览（六）

摘要：进入传入地址出来一个复杂对象把挂载到对象上太复杂我们先看可以缓存输入的文件系统输入文件系统输出文件系统，挂载到对象传入输入文件，监视文件系统，挂载到对象添加事件流打开插件读取目录下文件对文件名进行格式化异步读取目录下文件同步方法就进入webpack.js //传入地址,new Compiler出来一个复杂对象 compiler = new Compiler(options.conte...

ChristmasBoy 2019-08-23 14:49 评论0 收藏0