WEBPACK · 模块打包器

Webpack：前端工程化的核心引擎

Webpack 是前端模块打包的事实标准，负责把分散的模块、资源编译打包成高性能的产物。本讲梳理 Webpack 的核心概念、常用配置与优化手段，帮你从"会跑项目"到"懂构建"。

JS 基础 性能优化
Webpack 构建
🧩 模块打包
⚡ 构建优化
PAIN POINTS

前端工程化，这些坑绕不开

📦

打包体积越来越大

一个包几十 MB，页面加载极慢，用户首屏等得失去耐心。

🐢

构建一次等半天

项目一大，编译慢得离谱，改一行代码等 30 秒，开发效率崩溃。

🕸️

配置看不懂、不敢动

webpack.config 几百行，不知道每项干嘛，出了问题无从下手。

FEATURES

Webpack 的核心能力

🧩

模块打包

把 JS/CSS/图片等模块统一打包，依赖关系自动处理。

📦

代码分割

按需分包、动态 import，首屏只加载必要代码。

🗜️

压缩优化

JS/CSS 压缩、Tree Shaking 去冗余，产物更小更快。

🔧

Loader 体系

babel-loader、ts-loader 等处理各类资源，构建灵活。

🔌

插件生态

HtmlWebpackPlugin、MiniCssExtract 等，功能无限扩展。

💨

HMR 热更新

开发热更新，改代码即时生效，开发体验流畅。

CONFIG CHART

核心配置速查表

每个配置项解决一类问题，按需对照。

配置项解决什么
entry / output入口与产物输出路径、文件名
module.rulesLoader 处理 JS/TS/CSS/图片等资源
pluginsHtmlWebpackPlugin 等扩展能力
resolve.alias路径别名，简化引用
optimization.splitChunks第三方库分包与缓存策略
devServer开发服务器、代理、HMR
modedevelopment / production 环境差异
OPTIMIZE

构建优化清单

USE CASES

Webpack 用在哪

🏗️

Vue/React 工程

框架项目构建与优化，现代前端工程的标准基础设施。

📦

组件库打包

组件库产物的打包、按需引入与类型输出。

⚡

性能优化

代码分割、压缩、缓存，直接提升线上加载性能。

🧰

多端构建

多入口、多环境配置，一套代码构建多种产物。

项目构建又慢又大？

我们提供前端工程化与构建优化服务，让构建快、产物小、性能好。

性能优化 框架总览
FAQ

Webpack 高频问答

新项目推荐 Vite（基于 esbuild，启动快、配置简单）；Webpack 生态成熟、配置灵活、存量项目多。老项目继续 Webpack，新项目用 Vite。
用 webpack-bundle-analyzer 可视化各包体积，找出大依赖；配合 source-map-explorer 定位冗余，再按需引入或分包。
加缓存（cache）、多进程（thread-loader/parallel）、减少 loader 范围（include/exclude）、升级依赖与 Node 版本；或用 Vite 重构。
通常因代码有副作用（sideEffects 标记缺失）、使用 CommonJS、或引入方式不对。检查 package.json 的 sideEffects 与引入为具名导入。
用 mode/DefinePlugin 注入环境变量，dev/prod 不同配置；配合 .env 文件与 cross-env，一套代码构建不同环境产物。
产物文件名加内容哈希（[contenthash]），HTML 不强缓存、静态资源长缓存；配合 SplitChunks 把不常变的第三方库单独分包，提升缓存命中。
Loader 负责转换单个文件（让 Webpack 认识各类资源），Plugin 负责构建流程的钩子与整体能力（压缩、注入、分包）。Loader 管"文件"，Plugin 管"流程"。
配置本身不用 TS；业务代码用 ts-loader/babel 编译。近年可直接用 tsup/vite 替代 Webpack+TS 组合，选择看团队习惯与项目约束。

前端工程化，从构建开始

编程新知提供前端工程化搭建与优化服务，让每个项目都又快又稳。

性能优化框架总览