webpack配置多页面
时间: 2023-08-12 15:26:17 浏览: 45
配置Webpack实现多页面应用需要进行以下步骤:
1. 在Webpack配置中设置多个入口文件
```javascript
entry: {
page1: './src/page1.js',
page2: './src/page2.js'
},
```
2. 在Webpack配置中设置多个HtmlWebpackPlugin插件
```javascript
plugins: [
new HtmlWebpackPlugin({
title: 'Page 1',
filename: 'page1.html',
template: './src/template.html',
chunks: ['page1']
}),
new HtmlWebpackPlugin({
title: 'Page 2',
filename: 'page2.html',
template: './src/template.html',
chunks: ['page2']
})
],
```
3. 在模板文件中使用HtmlWebpackPlugin提供的模板变量来引用对应的JS文件
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<script src="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.chunks[0]].entry %>"></script>
</body>
</html>
```
这样就可以实现多页面应用了。每个页面会生成一个独立的HTML文件,对应的JS文件也会被引入。