Webpack配置多入口
程序员文章站
2022-07-12 19:23:01
...
我们平常一般都是用Webpack来配置单页面应用,但是有些特殊情况下需要多个页面来实现,Webpack是支持我们来打包多页面的,下面就来说一下配置方法吧:
第一步: 更改Webpack.config.js中的 entry配置
entry: {
app: './src/index.js',
print: './src/print.js'
},
第二步:更改 output的配置,以支持多文件输出
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
第三步: 增加HtmlWebpackPlugin插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'First Page',
filename: 'first.html',
chunks: ['app']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'Second Page',
filename: 'second.html',
chunks: ['print']
})
]
如果有多个页面就增加多个HtmlWebpackPlugin插件
chunks 用来配置打包后的html页面中引用哪些资源,对应的也就是entry中配置的key
运行打包命令后应该能在dist目录中看到 2个html页面,并且first.html
中引入了app.bundle.js
,second.html
中引入了print.js
这样我们就实现了Webpack的多页打包输出
上一篇: webpack的基本使用
下一篇: webpack多入口打包配置