这篇日志应该是在刚开始接触webpack的时候写的，现在发布出来，或许可以帮助一些刚入坑的童鞋。..就算有点low，重要的还是分享1.reduce方法介绍1.1简单场景reduce函数的设计意图是方便叠加操作：vararr=[0,1,2,3];//reduce实现累加vartotal=arr.reduce(function(pre,cur){returnpre+cur;},0);控制台日志（总计）；//6上面代码中，reduce方法有两个参数，第一个参数是回调，使用函数进行计算；第二个参数是累加计算的初值：0reduce以0为初值，从数组的第0项开始累加。上述代码的计算过程如下：total=0;//=>0总数=0+0；//=>0总数=0+1；//=>1总数=1+2;//=>3总数=3+3;//=>6如果初始值不设置为0，reduce会使用一个数组的第0项作为初始值，从第1项开始累加。计算过程如下：total=0;//=>0总数=0+1；//=>1总数=1+2;//=>3总数=3+3;//=>6可见reduce函数是根据初值0不断叠加，完成了最简单的数组累加。1.2两个简单的应用场景第一个demo使用reduce函数拼接二维数组：vararr=[[0],[1,2],[3,4,5]];//reduce实现数组Concatenationvarresult=arr.reduce(function(pre,cur){returnpre.concat(cur);},[]);控制台日志（结果）；//[0,1,2,3,4,5]第二个demo，使用reduce函数构造一个JSON数组：//本例演示：拆分所有员工的姓名varstaff=['BobDell','JohonJobs','MariaJuly'];//reduce构造JSON数组varresult=staff.reduce(function(arr,full_name){arr.push({first_name:full_name.split('')[0],last_name:full_name.split('')[1]});返回arr;},[]);console.log(JSON.stringify(result));//[{"first_name":"Bob","last_name":"Dell"},{"first_name":"John","last_name":"Jobs"},{"first_name":"Maria","last_name":"July"}]灵活使用reduce函数可以为我们省去很多中间变量和代码。2、用于实现webpack多文件入口配置。webpack配置项中的entry参数用于配置入口文件路径。通常情况下，对于只有一个目录下的文件需要打包，只需要遍历目录，构造一个对象传给entry即可：//注意：index.js是每个页面的入口文件，所有页面都在./fe/pages/目录varentry={index:'./fe/pages/home/index.js',list:'./fe/pages/list/index.js'};通常，我们使用reduce方法遍历同一目录下的条目：varfs=require('fs');varpath=require('path');...//定义条目路径varentryPath='./fe/pages';//遍历路径下的多个文件条目varentris=fs.readdirSync(entryPath).reduce(function(o,filename){!/\./.test(filename)&&(o[filename]='./'+path.join(entryPath,filename,'index.js'));returno;},{});//entry={//index:'./fe/pages/home/index.js',//list:'./fe/pages/list/index.js'//}适用于多页应用开发场景，可能需要构造类似下面的对象：//多个入口，页面和公共组件不一定在同一个目录下varentry={index:'./fe/pages/home/index.js'，列表：'./fe/pages/list/index.js'，页眉：'./fe/components/header/index.js'，页脚：'./fe/components/footer/index.js'}；可以发现我们要打包的页面，公共组件不一定在同一个目录下。这时候就需要对原来的方法进行扩展，看代码：varfs=require('fs');varpath=require('path');...//定义入口路径varentryPath=['./fe/pages','./fe/components'];//遍历路径下的多个文件入口varmkEntriesMap=function(entryPath){if(typeof(entryPath)=='string'){//如果entryPath是字符串，则直接遍历这个目录varpath_map=fs.readdirSync(entryPath).map(function(filename){returnfilename+'::./'+path.join(entryPath,filename,'index.js');});}elseif(typeof(entryPath)=='object'){//如果entryPath是数组，进行二级遍历varpath_map=entryPath.map(function(entry){returnfs.readdirSync(entry).map(function(filename){returnfilename+'::./'+path.join(entry,filename,'index.js');});}).reduce(function(preArr,curArr){返回preArr.concat(curArr);},[]);}else{抛出'config.entryPath的类型无效。';返回;}returnpath_map.reduce(function(o,file_map){varfile_name=file_map.split('::')[0];varfile_path=file_map.split('::')[1];if(!/\./.test(文件名)){o[file_name]=文件路径；}返回o;},{});};//构造对象varentries=mkEntriesMap(entryPath);//entry={//index:'./fe/pages/home/index.js',//list:'./fe/pages/list/index.js',//header:'./fe/components/header/index.js',//footer:'./fe/components/footer/index.js'//}这样做的好处是只需要在开头配置entryPath即可，支持单路径或多路径下的文件打包：//entryPath可以是字符串varentryPath='./fe/pages';//entryPath也可以是设置为数组varentryPath=['./fe/pages','./fe/components'];原创文章，转载请注明作者及出处
