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
同样多出口打包也成功过了。