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

2019-05-10304次阅读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));
	});

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

 

 

上一篇: Webpack4模式(mode)及production内置优化  下一篇: webpack使用uglifyjs-webpack-plugin压缩JS并支持IE低版本浏览器  

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