Webpack Vite 前端项目配置详解.docxVIP

WebpackVite配置详解

一、核心概念对比

Webpack

定位：静态模块打包器，基于依赖图构建，全量打包。

核心：entry（入口）、output（输出）、module.rules（Loader处理非JS）、plugins（扩展能力）、mode（环境）。

开发：webpack-dev-server，启动慢、热更新（HMR）需全量编译。

Vite

定位：下一代前端构建工具，开发环境基于原生ESM，生产环境用Rollup打包。

核心：vite.config.js，内置esbuild极速预构建，冷启动秒级、HMR瞬时。

开发：原生ESM，按需编译，无需打包。

二、Webpack5完整配置详解

1.基础结构（webpack.config.js）

javascript

运行

constpath=require(path);constHtmlWebpackPlugin=require(html-webpack-plugin);constMiniCssExtractPlugin=require(mini-css-extract-plugin);constCssMinimizerPlugin=require(css-minimizer-webpack-plugin);constTerserPlugin=require(terser-