Webpack & Vite 打包工具基础对比与完整配置实战教程

一、前言

Webpack 和 Vite 是目前前端工程化最主流的两大构建打包工具，二者定位与使用场景各有差异：

• Webpack：老牌全能打包工具，生态成熟、兼容性极强，依靠 Loader + Plugin 实现全资源打包，适配各类复杂项目。
• Vite：新一代极速构建工具，基于 ESM + esbuild 开发、Rollup 打包，舍弃繁琐配置，开发体验远超传统打包工具。

本文结合实战配置，极简讲解两者核心功能、基础配置项及使用区别，适合前端工程化入门学习与项目落地参考。

二、Webpack 核心功能 + 完整基础配置

2.1 Webpack 核心作用

Webpack 是静态模块打包器，核心能力：

1. 递归解析项目所有模块，生成依赖关系图；
2. 通过 Loader 处理 CSS、图片、高阶 JS 等非原生支持资源；
3. 通过 Plugin 干预打包全生命周期，实现自动化工程能力；
4. 支持多入口打包、源码调试、产物优化等完整工程化功能。

2.2 完整可运行配置（webpack.config.js）

// 引入自动生成HTML的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 构建模式：production生产模式（自动压缩、优化代码）
  mode: 'production',

  // 打包入口：支持单入口、数组多入口、对象多入口（多页面）
  entry: './src/index.js', 
  // entry: ["./src/a.js", "./src/b.js"], // 多文件合并打包
  // entry: { a1: './src/a.js', b1: './src/b.js' }, // 多入口独立打包

  // 打包产物输出配置
  output: {
    // filename: 'main.js', // 自定义输出JS文件名
    // clean: true, // 打包前自动清空dist目录旧文件
  },

  // Loader配置：处理Webpack默认不识别的资源
  module: {
    rules: [
      // 1. 处理CSS样式文件
      {
        test: /\.css$/i, // 匹配所有css文件（忽略大小写）
        // Loader执行顺序：从右往左
        // css-loader：解析css文件、处理依赖
        // style-loader：将样式插入页面生效
        use: ['style-loader', 'css-loader'], 
      },

      // 2. 处理图片静态资源（Webpack5内置，无需额外安装Loader）
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

      // 3. Babel转译ES6+高阶JS语法为ES5
      {
        test: /\.m?js$/, // 匹配js/mjs文件
        exclude: /(node_modules | bower_components)/, // 排除第三方依赖，提升打包速度
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 智能适配浏览器语法转换
          }
        }
      }
    ],
  },

  // 插件配置：扩展打包全流程能力
  plugins: [
    // 自动生成HTML文件，并自动注入打包后的静态资源
    new HtmlWebpackPlugin({
      title: 'Webpack App', // 页面标题
      template: './src/index.html', // 自定义HTML模板
    }),
  ],

  // 生成源码映射，支持打包后代码调试原始源码
  devtool: 'inline-source-map',
};

2.3 核心配置项精讲

✅ mode 构建模式

• production：生产模式，自动开启代码压缩、Tree-Shaking，产物最优；
• development：开发模式，保留调试信息、不压缩代码。

✅ entry / output 入口出口

• entry：项目打包起点，支持单入口、多入口合并、多入口独立打包；
• output：控制打包产物的文件名、输出路径、目录清空等。

✅ module.rules 资源处理（Loader）

Webpack 默认仅支持 JS/JSON，其他资源必须通过 Loader 处理：

• css-loader + style-loader：解析并挂载 CSS 样式；
• asset/resource：内置处理图片、静态资源；
• babel-loader：统一转换高阶 JS 语法，兼容低版本浏览器。

✅ plugins 插件能力

Loader 只处理单个文件，插件作用于整个打包生命周期。示例中 HtmlWebpackPlugin 可自动生成 HTML、注入打包资源，无需手动引入 JS/CSS。

✅ devtool 源码调试

inline-source-map：将源码映射嵌入产物，调试时可查看原始未编译代码，快速定位报错。

2.4 所需依赖安装命令

# 核心打包工具
npm i webpack webpack-cli -D
# HTML生成插件
npm i html-webpack-plugin -D
# CSS处理依赖
npm i style-loader css-loader -D
# JS语法转译依赖
npm i babel-loader @babel/core @babel/preset-env -D

三、Vite 核心功能 + 完整基础配置

3.1 Vite 核心作用

1. 开发环境：基于浏览器原生 ESM，esbuild 预构建依赖，秒级启动、毫秒级热更新；
2. 生产环境：基于 Rollup 打包，产物精简、打包性能优异；
3. 内置处理 CSS、图片、JSON 等资源，无需繁琐 Loader 配置，开箱即用。

3.2 完整可运行配置（vite.config.js）

// defineConfig：提供TS类型提示、IDE代码提示，无实际运行逻辑
import { defineConfig } from 'vite'
// 低版本浏览器兼容插件（支持IE11）
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  // 插件列表：扩展Vite功能
  plugins: [
    legacy({
      // 兼容默认浏览器 + IE11，自动转ES5、注入polyfill垫片
      targets: ['defaults', 'IE 11'] 
    })
  ]
})

3.3 核心配置项精讲

✅ defineConfig

纯语法糖，用于提供配置代码提示与类型校验，删除不影响项目正常运行。

✅ plugins 插件系统

Vite 所有扩展能力均依赖插件，无 Loader 概念。@vitejs/plugin-legacy 核心作用：

• 将现代 ES6+ 代码转译为 ES5；
• 自动生成 polyfill 垫片，兼容 IE11 等老旧浏览器；
• 现代项目无需兼容 IE，可配置为 targets: ['defaults'] 减小包体积。

3.4 所需依赖安装命令

# Vite核心构建工具
npm i vite -D
# 浏览器兼容插件
npm i @vitejs/plugin-legacy -D

四、Webpack 与 Vite 核心差异对比

对比维度	Webpack	Vite
构建原理	全量递归打包，统一编译所有模块	开发：ESM+esbuild；打包：Rollup
资源处理	依赖 Loader 处理所有非 JS 资源	内置支持 CSS/图片/JSON，无需 Loader
JS 转译	需手动配置 Babel	esbuild 内置转译，开箱即用
HTML 处理	依赖 HtmlWebpackPlugin 插件	原生支持 index.html 入口，自动注入资源
配置复杂度	配置繁琐，分层结构多	配置极简，扁平化设计
开发速度	项目越大越慢，全量打包	瞬时启动，热更新毫秒级

五、项目选型建议

• 选 Webpack：老旧项目维护、多页面复杂项目、需要深度自定义打包流程、强兼容场景；
• 选 Vite：Vue/React 现代单页项目、追求极致开发速度、轻量化工程、无需复杂定制打包；
• IE 兼容：Webpack 依托 Babel、Vite 依托 legacy 插件，均可实现兼容。

六、总结

1. Webpack 核心四要素：入口(entry)、出口(output)、Loader资源处理、Plugin插件扩展，是前端工程化基础核心；
2. Vite 弱化复杂配置，依托插件实现功能扩展，凭借 ESM+esbuild 彻底解决 Webpack 开发打包慢的痛点；
3. 两者核心思想一致：专用工具处理单一资源，插件扩展全局能力，适配不同项目场景即可。