webpack是干什么用的

你写了一个 index.js，里面 import 了 lodash，什用又 import 了一个 CSS 文件，什用甚至还有一张 PNG 图片。什用浏览器打开这个 HTML，什用控制台立刻报错：Uncaught SyntaxError: Cannot use import statement outside a module。什用就算你给 script 标签加上 type="module"，什用浏览器也只会去请求那个 lodash 的什用 CDN 地址——但你的代码里写的是 import _ from 'lodash'，它不知道去哪找。什用这时候 webpack 就登场了。什用

它本质上是什用一个模块打包器。你告诉它从哪个文件开始（入口），什用它就像一只嗅觉灵敏的什用狗，顺着 import、什用require 这些语句一路闻下去，什用把散落在项目里的 JS、CSS、图片、字体全部叼回来，然后按照依赖关系拼成一张图，最后吐出一个或者几个浏览器能直接跑的静态文件。这个过程叫“构建”，也叫“打包”。没有它，你手动管理几十个 <script> 标签的顺序，早晚会疯掉。

我刚开始用 webpack 的时候，最惊讶的是它居然能处理 CSS。以前写页面，样式要么塞在 <style> 里，要么单独用 <link> 引。webpack 通过 css-loader 和 style-loader，让你可以在 JS 文件里直接 import './style.css'。打包之后，样式被动态插入到 <head> 里。这听起来有点怪，但配合组件化开发，谁用谁舒服——组件逻辑和样式绑在一起，删组件的时候不会漏掉 CSS 文件。

但 webpack 不只是打包。它更像一个构建流水线。你可以在它上面挂各种 loader 和 plugin。比如把 ES6+ 的语法用 Babel 转成 ES5，把 SCSS 编译成 CSS，把小于 8KB 的图片转成 base64 内联，把大图片拷贝到输出目录。还能做代码分割——把不常变的第三方库单独打成一个 vendor.js，利用浏览器缓存。开发的时候它提供 webpack-dev-server，改代码自动刷新，甚至热更新，不用手动 F5。

有人会问：现在 Vite 那么快，webpack 是不是过时了？我自己的观察是，webpack 依然在大量存量项目里跑着，尤其是那些配置复杂、需要精细控制构建流程的老系统。它的生态太厚了，loader 和 plugin 的数量是其他工具的好几倍。而且 webpack 5 的持久化缓存把二次构建速度拉上来不少。Vite 开发时快是因为它用 esbuild 预构建依赖，生产打包还是 Rollup。两者定位不同，webpack 更像一个重型机床，慢一点，但什么零件都能车。

当然，它的配置出了名的劝退。一个 webpack.config.js 能写几百行，entry、output、module.rules、plugins、optimization 层层嵌套。我见过有人为了一个 publicPath 的斜杠折腾一下午。这也是为什么后来出现了 create-react-app、vue-cli 这些脚手架——把 webpack 配置藏起来，让你专心写业务代码。但一旦需要自定义，还是得扒开那层壳，直面 webpack 的配置对象。

说到底，webpack 解决的核心问题就一个：浏览器不认识模块化，也不认识非 JS 资源。它把这些东西翻译、合并、优化成浏览器能消化的形式。你写的代码越现代、依赖越复杂，它就越有用。如果你只是写一个几行的 HTML 页面，那确实用不上。但只要项目里出现了 import 和 export，出现了 npm 包，出现了 CSS 预处理器，webpack 或者它的同类工具就是绕不开的基础设施。

最后说一句主观判断：学 webpack 别一上来就啃官方文档的配置项。先跑一个最小例子——入口、出口、一个 babel-loader。看到 dist/main.js 生成出来，再慢慢加东西。它就是个工具，用多了自然就熟了。