Webpack本质上是一个用于js应用静态模块打包工具。作用是将前端项目中的所有资源通过分析模块之间的依赖关系构建出内部的依赖图最终将这些模块打包成一个或多个浏览器可识别的静态文件Webpack 的工作过程初始化读取配置文件如webpack.config.js加载配置项到内存中。编译从配置的entry入口开始递归分析并构建模块依赖图。遇到非 JS 文件时通过对应的 Loader 进行转换。打包将编译后的模块按 Entry 分组生成 Chunk并根据配置进行代码分割与合并。输出将处理好的 Chunk 转换成最终文件输出到output指定的文件夹。Entry入口Webpack 执行构建的第一步。它指示 Webpack 从哪个模块开始并以此为基础递归构建依赖图。默认入口通常是./src/index.jsOutput输出配置 Webpack 打包后生成的文件存放位置及命名规则。核心配置项包括output.path输出目录和output.filename输出文件名Loader加载器Webpack只能理解 JavaScript 和 JSON。Loader 的作用是让 Webpack 能够处理其他类型的文件如 CSS、图片、TS 等并将它们转换为有效的模块。常用的有babel-loader转译 ES6、css-loader等Plugin插件用于扩展 Webpack 的功能。Plugin 可以介入到整个编译的生命周期中执行更广泛的任务如打包优化、资源管理、生成 HTML 文件等。常用的有HtmlWebpackPlugin、MiniCssExtractPlugin等。Mode模式development开发模式注重构建速度和调试、production生产模式注重代码压缩和体积优化Webpack 性能优化代码分割Code Splitting通过动态import()语法或配置optimization.splitChunks将庞大的代码拆分为多个小文件实现按需加载减小首屏包体积。Tree Shaking剔除未使用的死代码。依赖于 ES6 的静态模块化语法import/export在生产模式下自动生效大幅减小打包体积。构建速度优化为babel-loader开启cacheDirectory缓存编译结果并通过include/exclude明确处理范围。使用 Webpack5 的持久化缓存cache: { type: filesystem }显著提升二次构建速度。缓存策略优化在output.filename中使用[contenthash]替代固定文件名配合浏览器长缓存策略实现静态资源的精准更新与缓存。文件类型常用Loader组合典型配置JavaScriptbabel-loader babel/coreES6转译/JSX处理TypeScriptts-loader fork-ts-checker-webpack-plugin类型检查加速CSSstyle-loader css-loader postcss-loader自动前缀/CSS模块SCSSsass-loader css-loader style-loaderSass编译图片资源url-loader image-webpack-loader自动Base64/压缩优化构建分析工具# 生成分析报告npx webpack --profile --json stats.json# 可视化分析工具npm install --save-dev webpack-bundle-analyzer基础配置const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { // 开发模式配置 mode: development, // 入口配置 entry: { main: ./src/index.js, vendor: [react, react-dom] }, // 输出配置 output: { filename: [name].[contenthash].js, path: path.resolve(__dirname, dist), clean: true }, // 模块处理规则 module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: babel-loader, options: { presets: [babel/preset-env, babel/preset-react] } } }, { test: /\.css$/, use: [style-loader, css-loader, postcss-loader] }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: asset/resource } ] }, // 插件系统 plugins: [ new HtmlWebpackPlugin({ template: ./public/index.html, favicon: ./public/favicon.ico }) ], // 开发服务器 devServer: { static: ./dist, hot: true, historyApiFallback: true, port: 3000 }, // 优化配置 optimization: { splitChunks: { chunks: all, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: vendors, chunks: all } } } } };环境区分// webpack.config.js module.exports (env) { const isProduction env.mode production; return { mode: env.mode || development, devtool: isProduction ? source-map : eval-cheap-module-source-map, plugins: [ new webpack.DefinePlugin({ process.env.NODE_ENV: JSON.stringify(env.mode) }) ] } }ViteVite 是一个由 Vue 作者尤雨溪开发的现代前端构建工具旨在解决传统打包工具如 Webpack在大型项目中冷启动慢、热更新滞后的痛点。Vite 的核心定位是“基于原生 ESM 的极速构建工具”。它的核心设计理念是明确区分开发与生产环境在开发阶段利用浏览器原生 ES 模块实现“无打包Bundleless”和按需编译在生产阶段使用 Rollup 进行高度优化的打包。Vite 为什么比 Webpack 快冷启动快无打包开发模式Webpack启动前需要解析所有依赖构建完整的依赖图并全量打包Bundle-based项目越大启动越慢。Vite启动时几乎零编译。利用现代浏览器原生 ESM 支持浏览器请求哪个模块服务端就实时编译并返回哪个模块ESM 按需编译启动速度不受项目规模影响。热更新HMR快Webpack修改一个文件需要重新构建整个相关的模块依赖树Chunk耗时随项目增大而增加。Vite通过 ESM 边界隔离仅让修改的单个模块失效并重新请求HMR 速度通常在毫秒级与项目规模无关。依赖预构建Vite 在首次启动时会使用esbuildGo 语言编写比 JS 编译器快 10-100 倍对node_modules中的第三方依赖进行预构建。解决两大痛点①格式兼容将 CommonJS/UMD 格式转换为浏览器支持的 ESM 格式②减少请求将内部包含大量小模块的库如 lodash-es合并为一个文件避免浏览器发起数百次 HTTP 请求导致网络崩溃。如何处理 CSSVite 开箱即用支持原生 CSS、CSS Modules文件名带.module.css自动启用、CSS 预处理器安装 sass/less 即可直接 import无需配置 loader以及 PostCSS。如何配置环境变量Vite 使用.env文件如.env.production、.env.test管理环境变量在代码中通过import.meta.env.VITE_XXX访问只有VITE_前缀的变量才会暴露给客户端代码。Vite 的插件系统Vite 的插件系统基于 Rollup 插件 API 设计同时扩展了 Vite 专属的钩子如transformIndexHtml支持在开发环境和生产环境介入自定义逻辑。特性WebpackVite启动机制全量打包按需编译模块系统模拟 CommonJS原生 ESMHMR 效率线性增长恒定时间构建工具自研打包Rollup开发服务器内存文件系统真实文件系统技术栈支持技术支持方式示例配置Vue官方插件vitejs/plugin-vueReact官方插件vitejs/plugin-reactTypeScript原生支持零配置CSS 预处理器内置支持.scss/.less 直接导入静态资源智能处理自动路径处理快速开始# 创建项目npm create vitelatest my-project -- --template vue-ts# 目录结构my-project/├── node_modules├── src/│ ├── main.ts│ ├── App.vue│ └── ...├── index.html├── vite.config.ts└── package.json// vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], resolve: { alias: { : /src } }, server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } }, build: { rollupOptions: { output: { manualChunks: { lodash: [lodash-es] } } } } })性能优化构建优化策略优化方向实现方案配置示例依赖预构建optimizeDeps 配置optimizeDeps: { include: [lodash-es] }代码分割动态 import rollup 配置manualChunks配置图片压缩vite-plugin-imagemin自动 PNG/JPG 优化Gzip 压缩vite-plugin-compression预生成压缩文件加载优化方案// 典型配置组合export default defineConfig({build: {cssCodeSplit: true,assetsInlineLimit: 4096, // 4KB以下资源内联sourcemap: hidden,minify: terser}})推荐使用场景现代浏览器项目Chrome 61, Firefox 60, Safari 11框架新项目Vue3/React18/Svelte库开发利用 Rollup 的纯净打包微前端子应用快速加载需求暂不推荐场景需要支持 IE11 的项目已有复杂 Webpack 配置的大型项目需要深度自定义构建流程的特殊需求