请写一篇关于【现代前端工程化入门：Webpack基础教程】的技术文章

去年十月，我还在成都一家外包公司“搬砖”，每天早上七点半挤地铁，穿过春熙路的人山人海，赶到软件园C区的一间小格子间。那会儿我的工位对面是个95后实习生，天天戴着AirPods听《孤勇者》，而我一边改着第37版的“用户中心页面”，一边在心里默念：老子今年一定要跳槽进甲方！

那时候我在外包干了整整三年，月薪15k，房租3500，老婆总念叨：“隔壁老王都买车了，你还在搞什么‘模块打包’？” 我苦笑——她哪知道，我连“模块”是啥都没整明白。

转折点发生在一个周五晚上。项目快上线，客户临时要求把所有静态资源用CDN加速，还要支持按需加载、代码分割。项目经理拍我肩膀：“小李啊，你不是说你会前端工程化吗？Webpack搞一下呗。”
我表面点头，内心慌得一批：Webpack？不就是那个黑魔法配置文件比业务逻辑还长的玩意儿？

那天晚上我熬到凌晨三点，webpack.config.js 写得像天书，entry、output、loader、plugin 搞得我头大如斗。最后项目勉强跑起来了，但构建时间82秒，开发环境热更新直接卡死。第二天晨会，技术总监冷冷一句：“这效率，下周上线怕是要炸。”

那一刻，我真的焦虑了。不是怕加班，是怕自己被时代甩下。外包三年，我写的最多的是 jQuery + Bootstrap，React/Vue 只是简历上“熟悉”的两个词。而甲方招人的JD里清清楚楚写着：“精通 Webpack/Vite 等构建工具”。

回家路上，我给老婆发消息：“我想辞职学前端工程化。”
她回：“房贷怎么还？”
我说：“再拼三个月，不行就转行送外卖。”
她沉默了一会儿，回了个“加油”。

于是，我开始了“闭关修炼”。白天继续应付外包需求，晚上九点后打开 VS Code，从零搭建一个项目。目标很明确：搞懂 Webpack，不是会用，而是理解它为什么这么设计。

项目案例：从零搭建一个 React + Webpack 的脚手架

我没有直接用 Create React App，而是自己 mkdir my-app && cd my-app && npm init -y。
第一步，装核心依赖：

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install --save react react-dom

然后创建最简目录：

my-app/
├── src/
│   ├── index.js
│   └── App.jsx
├── public/
│   └── index.html
└── webpack.config.js

index.js 很简单：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

重点来了——webpack.config.js。我一开始照抄网上的模板，结果一运行就报错：“You may need an appropriate loader to handle this file type.”
对，JSX 不被原生支持。于是加 babel-loader：

npm install --save-dev @babel/core @babel/preset-react babel-loader

配置 module rules：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

跑 npx webpack，成功！dist/ 目录生成了 bundle.js 和 index.html。那一刻，我差点哭出来——不是感动，是终于看懂了 Webpack 的“入口-处理-输出”这条链路。

但问题还没完。开发时怎么热更新？我加上 webpack-dev-server：

devServer: {
  contentBase: './dist',
  hot: true,
  port: 3000
}

再配个 script：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

现在 npm start 就能本地开发，改代码自动刷新。爽！

后来我又加了 CSS 处理（css-loader + style-loader）、图片处理（file-loader）、代码压缩、分包（SplitChunksPlugin）……每一步都踩坑，但每解决一个，就感觉自己离“真正的前端工程师”近了一步。

我把这个项目传到了 GitHub，起名叫 code-life-webpack-starter（当然这是化名）。README 里写了一句：“From outsourcing to in-house. This is my code life.”

为什么 Webpack 值得你花时间？

很多人说：“现在有 Vite，谁还学 Webpack？”
这话没错，但就像你会用 iPhone，不代表你不需要了解操作系统原理。Webpack 是现代前端工程化的基石。理解它，你才能：

• 看懂公司项目的构建流程
• 遇到构建慢、包太大、缓存失效等问题时，不再只会喊“前端锅”
• 在面试时，不是背八股文，而是讲出“我们项目用 SplitChunks 把 vendor 包拆出来，首屏加载快了 40%”

更重要的是，工程化能力是你从小厂突围的关键。外包公司没人教你这些，全靠自己啃。但一旦掌握，你就有了议价权。

今年三月，我拿到成都一家本地电商公司的 offer，甲方，正式岗，月薪22k。谈薪时 HR 问我：“你外包背景，能适应我们节奏吗？”
我直接打开 GitHub，展示我的 Webpack 脚手架项目，还现场解释了如何优化构建速度。HR 眼睛亮了：“你比我们有些老员工还懂。”

搬家那天，老婆笑着说：“看来不用送外卖了。”
我回：“下次争取带你去太古里喝星巴克，不看价格。”

写在最后：代码人生，不止于代码

回头看看，Webpack 只是一个工具，但它背后代表的是一种思维：如何把混乱变成秩序，把重复变成自动化，把“能跑就行”变成“高效可靠”。

很多外包兄弟和我一样，困在需求泥潭里，觉得“学这些有什么用，客户只要页面能点就行”。但现实是：市场只奖励那些主动跳出舒适区的人。

如果你也在成都，也在外包，工资不高但心气不低——别等公司培养你，自己动手造轮子。哪怕只是一个简单的 Webpack 配置，也是你“代码人生”的一块砖。

GitHub 上的 commit 记录，不会骗人。你的努力，终会被看见。

共勉。