微前端：Webpack 配置 vs Vite 配置 超清晰对比

微前端：Webpack 配置 vs Vite 配置 超清晰对比

我直接用最简单、最直白、能落地 的方式告诉你：
为什么现在都用 Vite 做微前端，Webpack 有什么坑，两者到底差在哪。

---

一、一句话总结

• Webpack ：配置繁琐、要处理 publicPath、跨域、库打包格式，坑多。
• Vite ：靠插件一键搞定，几乎零配置、无坑、速度极快。

---

二、核心区别对比表（最关键）

项	Webpack 配置	Vite 配置
配置复杂度	高（要改 output、devServer、publicPath）	极低（一个插件搞定）
跨域处理	必须手动配置 headers	自动支持，无需配置
资源路径问题	必须加 public-path.js 修复	插件自动处理
生命周期导出	手动写 bootstrap/mount/unmount	插件自动封装
热更新速度	慢	极快（100x 提升）
子应用独立运行	要判断环境	自动支持
路由 basename	手动加	自动处理
适合人群	老项目、必须用 Webpack 的	新项目、追求效率、React+Vue 混部

---

三、Webpack 到底要改哪些东西？（繁琐到爆炸）

Webpack 必须改 5 处：

1. output 库格式（umd）
2. devServer 跨域
3. publicPath 修复资源 404
4. 手动导出生命周期
5. 手动加路由 basename

Webpack 配置示例（你感受下复杂度）

// config-overrides.js
module.exports = {
  webpack: (config) => {
    config.output.library = 'react-subapp';
    config.output.libraryTarget = 'umd';
    config.output.publicPath = '/';
    return config;
  },
  devServer: (configFunction) => {
    return (proxy, allowedHost) => {
      const config = configFunction(proxy, allowedHost);
      config.headers = { 'Access-Control-Allow-Origin': '*' };
      return config;
    };
  },
};

还要加：

// public-path.js（必须）
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

---

四、Vite 到底要改哪些东西？（超级简单）

Vite 只需要 2 步：

1. 装插件
2. vite.config 加一行

Vite 配置示例（干净清爽）

import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  plugins: [
    vue(), // 或 react()
    qiankun('vueSub', { useDevMode: true }) // 只加这一行
  ]
})

没有跨域、没有 publicPath、没有库格式、没有资源 404！

---

五、为什么 Vite 完胜 Webpack？

1）Vite 插件帮你做了所有脏活

• 自动处理跨域
• 自动处理资源路径
• 自动导出生命周期
• 自动适配独立运行 / 主应用运行
• 自动处理路由 basename

2）速度差距巨大

• Webpack 热更新：几秒
• Vite 热更新：毫秒级

3）React + Vue 混部，Vite 最稳定

Webpack 在不同技术栈之间会出现：

• 样式冲突
• 资源 404
• 热更新失效
• 打包异常

Vite 完全没有这些问题。

---

六、你应该怎么选？

✔ 新项目 → 直接用 Vite（99% 推荐）

✔ 老项目、不能改构建 → 用 Webpack

---

七、最终结论（最直白）

• Webpack 配置 = 麻烦 + 坑多 + 慢
• Vite 配置 = 简单 + 稳定 + 飞快

现在做微前端，没有任何理由不用 Vite。