构建现代前端工程：Webpack/Vite/Rollup配置解析与最佳实践

导读： 解析三大工具核心配置与优化策略，助你精准匹配应用场景，提升工程效率。

设计理念对比

Webpack 以模块化打包为核心，通过构建依赖图谱处理各类静态资源（JS/CSS/图片等），其核心优势在于插件生态（如Babel-loader、CSS Modules）和复杂场景支持（代码分割、懒加载）。但配置复杂度高，大型项目冷启动可达10秒以上。

Vite 基于原生ES模块实现按需编译。开发环境用Esbuild预构建依赖，启动时间降至毫秒级；生产环境用Rollup打包，结合浏览器缓存提升加载速度。其设计哲学是开发体验优先，但对传统项目兼容性较弱。

Rollup 专为库打包优化，通过静态分析实现极致Tree-Shaking（可清除未使用的类方法），输出代码无运行时包装。但缺乏对动态导入、CSS分离等应用级功能的原生支持，需依赖插件扩展。

核心配置详解

入口与出口配置

• Webpack：支持多入口分包，通过占位符[name]动态命名。

  module.exports = {
       
        entry: './src/index.js'</