如果你现在的日常是「页面能跑就行」，构建配置全靠复制粘贴，出了问题只能删掉 node_modules 重装碰运气，那这门课值得花时间过一遍。webpack 的知识缺口通常不是「不会写配置」，而是不知道每一段配置为什么这么写、打包出来的东西到底长什么样、体积和加载顺序由谁决定。

先确认你要补的是哪一层

webpack 的学习可以拆成三层，缺哪层补哪层，不必从头到尾平均用力。

概念层：entry、output、loader、plugin、mode、chunk、bundle、hash，这几个词经常一起出现，但很多人说不清 chunk 和 bundle 的区别。概念不清，配置就是玄学。
配置层：处理 CSS、图片、字体，区分开发与生产环境，配置 devServer 和代理，踩一遍路径、publicPath、资源引用的坑。
优化层：拆包、懒加载、tree shaking、缓存控制、打包体积分析。这一层直接对应线上首屏速度和白屏问题。

多数人的问题是第一层没打牢就跳到第三层，抄来的 splitChunks 配置跑通了，却解释不了为什么某个第三方库被打进了主包。

几处最容易卡住的地方

loader 与 plugin 的边界

loader 处理的是「单个文件的转换」，plugin 介入的是「整个构建流程」。理解这条界线，配置里那些 loader 链式调用的顺序问题就不难判断了——从右往左执行，谁先谁后取决于你想先得到什么形态的中间结果。

开发与生产的配置差异

开发环境要的是快和可调试，生产环境要的是小和可缓存。两者对 source map、压缩、hash 命名的取舍完全相反。把一套配置硬套两种场景，是很多项目构建慢、产物乱的根源。

打包产物与运行时的关系

只会看配置文件，不会看 dist 里生成了什么，就永远调不好。建议每改一次配置就去看产物：多出了哪些文件、公共依赖去了哪个 chunk、异步模块是不是单独拆出来了。这一步比读十篇优化文章都有用。

配套怎么练

光看视频不动手，学完还是不会配。建议按这个顺序练：

拿一个不用构建工具的旧项目，手工接上 webpack，先把 JS 和 CSS 跑通，再逐步加图片、字体等资源处理。
刻意制造报错：路径写错、loader 顺序颠倒、循环依赖，看报错信息指向哪里，练到能凭提示定位问题。
给同一个项目写两份配置，对比开发和生产模式下的产物差异，把文件大小、文件数量、命名规则都记下来。
用分析工具看一次依赖构成，找出体积最大的三个模块，想想它们该不该进主包。

做完这几步，你会对「构建」这件事从被动接受变成主动控制。

学完应该能回答的问题

为什么改了代码，浏览器有时不刷新，有时刷新了状态却没变？
打包后文件名里那串哈希是干什么用的，换一种哈希写法会有什么后果？
首屏只用到一小部分代码，剩下那些能不能等到需要时再加载？怎么保证拆出去的文件真的没被打回主包？
项目构建越来越慢，怎么判断时间花在了哪一步？
同事发来的配置报错，你能不看文档就说出大概方向吗？

这些问题的答案，比记住多少个配置项更能说明你是否真的入门了。如果目前有一半答不上来，就从概念层开始，别急着上优化。