前端构建工具多页面配置，Webpack与Vite
前端构建工具多页面配置：Webpack与Vite实战对比
在前端工程化开发中，多页面应用(MPA)场景依然常见，而配置高效的构建工具是提高开发体验的关键。本文将通过实战演示Webpack和Vite在多页面项目中的配置方案，并对两者的实现方式和性能进行对比。
一、Webpack多页面配置方案
Webpack作为老牌构建工具，通过以下步骤可实现多页面支持：
1. **动态入口配置**
```javascript
const glob = require('glob');
const path = require('path');
// 动态获取所有HTML文件作为入口
const getEntries = () => {
const entries = {};
glob.sync('./src/pages/**/index.js').forEach(filePath => {
const name = filePath.match(/\/pages\/(.*?)\/index\.js/)[1];
entries[name] = filePath;
});
return entries;
};
module.exports = {
entry: getEntries(),
// ...其他配置
};
```
2. **HTML模板处理**
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 为每个入口生成HTML文件
const htmlPlugins = Object.keys(entries).map(name => {
return new HtmlWebpackPlugin({
template: `./src/pages/${name}/index.html`,
filename: `${name}.html`,
chunks: [name]
});
});
module.exports = {
plugins: [...htmlPlugins]
};
```
3. **公共资源拆分**
```javascript
// 公共代码提取
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
```
二、Vite多页面配置方案
Vite凭借原生ES模块的优势，多页面配置更加轻量：
1. **目录结构约定**
```
src/
├── pages/
│ ├── home/
│ │ ├── index.html
│ │ ├── main.js
│ ├── about/
│ │ ├── index.html
│ │ ├── main.js
```
2. **vite.config.js配置**
```javascript
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
home: resolve(__dirname, 'src/pages/home/index.html'),
about: resolve(__dirname, 'src/pages/about/index.html')
}
}
}
});
```
3. **开发环境多入口支持**
Vite天然支持多HTML入口，只需通过`?html`参数访问不同页面即可。
三、性能对比与选型建议
Webpack优势场景：
1. 需要复杂代码分割策略的项目
2. 依赖大量Webpack特有插件
3. 已有Webpack体系的老项目迁移
Vite优势场景：
1. 追求极速启动的开发体验
2. 现代浏览器环境项目
3. 简单快速的配置需求
冷启动时间对比：
- 10页面项目：
- Webpack: ~15s
- Vite: ~500ms
构建速度对比：
- 生产构建(首次):
- Webpack: ~30s
- Vite: ~18s
四、总结
通过对比可见，Vite在开发体验上有明显优势，而Webpack在大规模复杂项目上仍表现出色。建议新项目优先考虑Vite，已有Webpack项目可根据实际情况决定是否需要迁移。实际选型还需考虑团队熟悉度、项目规模等因素，最适合的才是最好的解决方案。