一、Webpack 核心概念Webpack 本质是一个模块打包器module bundler核心思想就一句话把一切资源当成模块然后构建依赖图打包输出1. Entry入口项目从哪里开始打包entry: ./src/index.js 相当于依赖分析的起点2. Output输出打包后的文件输出到哪里output: { filename: bundle.js, path: path.resolve(__dirname, dist) }3. Module模块Webpack 默认只认识 JS、JSON 其他资源CSS、图片、TS都需要处理4. Loader加载器让 Webpack 能处理非 JS 文件本质文件转换器例如module: { rules: [ { test: /\.css$/, use: [style-loader, css-loader] } ] }常见 loaderbabel-loaderES6 → ES5ts-loaderTS → JScss-loader / style-loaderfile-loader / url-loader已被 asset modules 替代5. Plugin插件扩展 Webpack 功能更强大例如plugins: [ new HtmlWebpackPlugin(), new MiniCssExtractPlugin() ]常见用途生成 HTML压缩代码提取 CSS环境变量注入6. Mode模式mode: development | production区别development快不压缩production慢但优化好7. Chunk代码块 打包过程中生成的代码块来源入口动态 importsplitChunks8. Bundle最终文件 浏览器真正加载的文件9. Dependency Graph依赖图 Webpack 最核心机制index.js → a.js → b.js → c.cssWebpack 会递归分析所有依赖 → 构建图 → 打包二、常见优化手段重点优化可以分为三类1️⃣ 构建速度优化开发体验✅ 缩小打包范围include: path.resolve(__dirname, src) exclude: /node_modules/✅ 使用缓存cache: { type: filesystem }✅ 多进程打包thread-loaderuse: [thread-loader, babel-loader]✅ 使用更快的工具替代babel →swc / esbuildterser → esbuild压缩✅ 合理使用 sourceMapdevtool: eval-cheap-module-source-map✅ 开发环境用 HMR热更新devServer: { hot: true }2️⃣ 打包体积优化上线性能✅ Tree Shaking摇树优化 删除无用代码ES Module 必须usedExports: true前提使用 ES Moduleimport/exportpackage.json 设置sideEffects: false✅ 代码分割Code Splitting动态加载import(./module)配置拆包optimization: { splitChunks: { chunks: all } } 拆分vendor第三方库公共代码✅ 压缩代码默认 production 已开启JSTerserCSScss-minimizer-webpack-plugin✅ 提取 CSSnew MiniCssExtractPlugin() 避免 JS 里插入 style提高加载性能✅ 图片优化使用asset/resource小图转 base64图片压缩image-minimizer✅ Gzip / Brotli 压缩new CompressionPlugin()3️⃣ 运行时性能优化✅ 懒加载Lazy Loadconst Comp React.lazy(() import(./Comp))✅ CDN 加速externals: { react: React } 不打包 React用 CDN✅ 缓存优化关键文件名加 hashfilename: [name].[contenthash].js 浏览器长期缓存✅ runtime 分离optimization: { runtimeChunk: single }三、面试总结可以直接背 核心概念一句话Webpack 是一个基于依赖图的模块打包工具通过 Entry 构建依赖关系使用 Loader 处理模块Plugin 扩展功能最终输出 Bundle。 优化三板斧构建优化缓存、多线程、缩小范围体积优化Tree Shaking、代码分割、压缩运行优化懒加载、CDN、缓存