webpack如何配置多入口多出口打包

webpack如何配置多入口多出口打包

因为项目如果复杂的时候，入口肯定不止一个，下面来看，如何配置多个入口文件
我们在src目录下面创建一个新的入口文件
about.js

export default (a,b)=>{
	return a+b+666
}

来看一下我的目录结构：

webpack.config.js
改变entry的配置：

entry:{ //定义入口文件
index:"./src/index.js",
about:"./src/about.js"
}

改变entry的配置：

//这个name是自带的，代表入口文件的名称例如上面定义的：index或者about

output:{
filename:’[name].js’,
path:path.resolve(__dirname,“dist”) //默认
}

这个时候我们执行打包命令：npm run dev

可以看到我们多入口打包成功了。并且都引入到一个默认模板index.html当中。

多出口打包

那么上面我面多入口已经完成了，但是打包后都插入到默认的index.html当中了，只有这一个出口，下面看如何制造多个出口。

首先多出口肯定不止一个 模板文件，所以我们要在index.html的同级目录新建一个出口文件为 about.html

接下来我们需要去调整一下webpack.config.json文件下的plugins配置，因为我们之前只是单出口如图:

那么现在我们多入口应该如何写呢，看代码：

	plugins:[//设置插件使用
		new HtmlWebpackPlugin({
			template:"./index.html",	//设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
			filename:"index.html",		//输出文件的名称(打包后的html文件名,可以自己设置,最好不要变动)
			hot:true,					//自动刷新浏览器
			chunks:['index']			//代表指定的入口文件是哪个
		}),
		
		//那么同理我们有两个出口是不是要配置两次，像这样
		
		new HtmlWebpackPlugin({
			template:"./about.html",	//设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
			filename:"about.html",		//输出文件的名称(打包后的html文件名,可以自己设置,最好不要变动)
			hot:true,					//自动刷新浏览器
			chunks:['about']			//代表指定的入口文件是哪个
		})
	]

下面我们执行 打包命令：npm run dev

至此，我们的多出口打包也完成了。但是在这之间，有一个问题，就是我们在配置多出口文件的时候，出现了重复代码，这对于许多有强迫症的程序员是不能接受，毕竟，如果我们有一个两个出口，可以这样配置，如果有几十甚至更多呢，那这样就会多出很多不必要的代码，由此，我们可以封装一下。

封装方法如下：
1.我们首先要把出口文件定义成一个数组，然后进行map循环，我们只要返回HtmlWebpackPlugin这样一个实例就可以，拿到当前的实例对象，chunkName然后通过ES6 语法的字符串模板将当前值作为一个变量，分别设置当前入口文件的每个属性，就可以了。

const Htmlplugin =["index","about"].map(chunkName=>{
	return new HtmlWebpackPlugin({
			template:`./${chunkName}.html`,	//设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
			filename:`${chunkName}.html`,		//输出文件的名称(打包后的html文件名,可以自己设置,最好不要变动)
			chunks:[chunkName],		//代表指定的入口文件是哪个
		})
})

紧接着，我们需要把示例放在plugins里面进行应用，map循环后生成的新数组，所以需要把Htmlplugin 这个数组打开，放在plugins里面，也是使用ES6里面的扩展运算符 “…”进行数组的展开，就可以了。

	plugins:[//设置插件使用
		new CleanWebpackPlugin(),		//通过new去执行.作用:清空输出的目录
		...Htmlplugin
	]

执行打包命令：npm run dev

同样多出口打包也成功过了。