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

打开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 ={} 对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧