avatar

Webpack配置多入口

我们平常一般都是用Webpack来配置单页面应用,但是有些特殊情况下需要多个页面来实现,Webpack是支持我们来打包多页面的,下面就来说一下配置方法吧:

第一步: 更改Webpack.config.js中的 entry配置

1
2
3
4
entry: {
app: './src/index.js',
print: './src/print.js'
},

第二步:更改 output的配置,以支持多文件输出

1
2
3
4
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},

第三步: 增加HtmlWebpackPlugin插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.jssecond.html中引入了print.js 这样我们就实现了Webpack的多页打包输出

文章作者: 惆怅客
文章链接: https://www.songhailong.com/articles/6d2f5d14/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 惆怅客

评论