Webpack将多个文件夹入口输出到多个文件夹实践

以gulp4构建任务实例代码为例，正常情况下Entry入口是这样的：

const files = glob.sync('src/js/*.ts');

output输出是这样的：

output: {
			filename: '[name].js',
			path: __dirname + '/build/js'
		},

这样的配置只能实现src/js/所有js文件，输出到build/js目录下。像src/js/v.1.0.0/jssdk.ts输出到build/js/v.1.0.0/目录下就做不到。

网上搜了一下，说只要给entry的key加上目录名称就好了：

entry : {  

    "demo/button": "demo/button/index.jsx",  

    "demo/grid": "demo/grid/index.jsx"
},

output: {  

    path: 'dist/js',  

    filename: "[name].js",  

}

但我的情况跟它这不太一样，不过这确实是一个好的启发。

还是以gulp4构建任务实例代码为例：

一、先修改筛选src/js下多目录ts文件

const files = glob.sync('src/js/**/*.ts');

二、给entry的key加上目录名

files.forEach(filepath => {
		const pathObj = path.parse(filepath);
		const dir = `${pathObj.dir.replace(/src\/js/,'')}/${pathObj.name}`;
		entry[dir] = path.resolve(filepath);
		//console.log(dir,pathObj,path.resolve(filepath));
	});

经测试，达到需求目标，有无子目录都可用。