现代前端工程化入门：Webpack基础教程
上周五晚上十点半，我戴着 AirPods 听着 Lofi Hip Hop，盯着屏幕上 Module not found: Can't resolve 'react' 的报错，手边的咖啡已经凉透。这已经是本周第三次因为打包配置问题被测试小哥追着问“为什么线上样式乱了？”——那一刻我真的想把键盘塞进产品经理的嘴里。
我是老张，外包公司干了快四年，现在这个组待了快两年。从 jQuery 时代一路摸爬滚打到 React + TypeScript + Webpack 全家桶，踩过的坑比我写的代码行数还多。今天写这篇，不是为了装大神，纯粹是被逼无奈——上个月新来的实习生又把 webpack.config.js 改崩了，导致我们给某区块链项目做的前端监控面板直接白屏，客户差点把运维电话打爆。
起因：一个“简单”的需求
事情是这样的：客户要做一个区块链数据可视化平台（别问为啥外包公司能接到这种活，问就是“资源整合”）。后端用 Java 写的微服务，前端要求用 React 展示链上交易流、钱包地址关系图之类。听起来挺酷，对吧？
结果产品周一晨会甩过来一句话：“我们要支持 IE11，还要首屏加载小于 2 秒。”
我：？？？
要知道，光 @antv/g6（那个做关系图的库）就 1.8MB，再加上 React、Redux、Axios……不优化的话 bundle 轻轻松松超 5MB。更别说 IE11 连 Promise 都不认识。这时候，工程化工具的重要性就凸显出来了——而 Webpack，就是我们前端的“瑞士军刀”。
别被 Webpack 吓到
很多新人一听到 Webpack 就头大，觉得又是配置地狱。其实没那么玄乎。说白了，它就是一个模块打包工具：把你写的 .js、.css、.png 甚至 .svg 文件，统统“嚼碎了”再“重新拼装”，输出成浏览器能高效运行的静态资源。
举个接地气的例子：你写了个 React 组件，里面 import 了一个 SVG 图标。Webpack 能自动把那个图标转成 base64 嵌进 JS 里，或者单独抽成文件，还能压缩、加 hash 防缓存——这些全靠配置决定。
动手：从零搭个 React 项目
先别管什么 loader、plugin，咱们一步步来。假设你已经装好了 Node.js（没装？快去！），在一个空文件夹里执行：
npm init -y
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install react react-dom
然后创建目录结构：
my-blockchain-dashboard/
├── src/
│ ├── index.js
│ └── App.js
├── public/
│ └── index.html
└── webpack.config.js
public/index.html 很简单：
<!DOCTYPE html>
<html>
<head>
<title>区块链看板</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js：
import React from 'react';
export default function App() {
return <h1>Hello, Blockchain!</h1>;
}
src/index.js：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
重点来了——webpack.config.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件
entry: './src/index.js',
// 输出配置
output: {
filename: '[name].[contenthash].js', // 加 hash 防缓存
path: path.resolve(__dirname, 'dist'),
clean: true // 每次构建清空 dist
},
// 开发服务器
devServer: {
static: './public',
open: true,
port: 3000
},
// 模块规则（核心！）
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
// 解析扩展名
resolve: {
extensions: ['.js', '.jsx']
}
};
别慌，这段配置其实很直白：
entry：告诉 Webpack 从哪开始打包output：打包完放哪，文件叫啥module.rules：遇到.js或.jsx文件，就用 Babel 转一下（让 React 语法能跑在老浏览器）plugins：用HtmlWebpackPlugin自动生成带 script 标签的 HTML
装两个依赖：
npm install babel-loader @babel/core @babel/preset-react html-webpack-plugin --save-dev
然后跑起来：
npx webpack serve
浏览器自动打开 localhost:3000，看到 “Hello, Blockchain!” ——恭喜，你已经跨过了第一道坎！
踩坑实录：IE11 的血泪史
回到开头那个需求。光这样肯定不行，IE11 根本跑不动。怎么办？两招：
- polyfill 补丁：用
core-js填平 API 差异 - Babel 转译：把 ES6+ 语法降级成 ES5
先装：
npm install core-js regenerator-runtime --save
npm install @babel/preset-env --save-dev
改 Babel 配置（.babelrc）：
{
"presets": [
["@babel/preset-env", {
"targets": "> 0.5%, IE 11",
"useBuiltIns": "usage",
"corejs": 3
}],
"@babel/preset-react"
]
}
关键点：useBuiltIns: "usage" 会按需引入 polyfill，而不是一股脑全塞进去——省下好几百 KB！
同时，在 src/index.js 最顶部加上：
import 'core-js/stable';
import 'regenerator-runtime/runtime';
搞定！现在连 IE11 都能显示“Hello, Blockchain!”了（虽然慢得像树懒，但至少不白屏）。
性能优化：别让客户等出 PTSD
但客户要的是“2秒内首屏”。这时候就得祭出 Webpack 的高级技巧：
1. 代码分割（Code Splitting）
默认所有代码打成一个 bundle，太大。我们可以按路由拆：
// 以前
import Dashboard from './Dashboard';
// 现在
const Dashboard = lazy(() => import('./Dashboard'));
配合 Webpack 的 SplitChunksPlugin（默认已开启），自动把公共依赖（如 React）抽出来：
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
}
}
}
}
结果：main.js 从 2.1MB 降到 800KB，vendors.js 单独缓存，后续页面飞快。
2. 压缩与 Tree Shaking
确保 mode: 'production'，Webpack 会自动：
- 压缩 JS/CSS
- 删除未引用的代码（Tree Shaking）
比如你只用了 lodash 的 debounce，其他几百个函数根本不会被打包进去。
3. 静态资源处理
图片、字体怎么办？加个 rule：
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource' // 自动输出到 dist/assets/
}
小图标还可以转 base64 内联，减少 HTTP 请求：
{
test: /\.svg$/,
type: 'asset/inline' // 注意：只适合小文件！
}
效果如何？
上线前夜，我们做了对比测试（本地模拟 3G 网络）：
| 方案 | 首屏时间 | Bundle 大小 | IE11 兼容 |
|---|---|---|---|
| 无优化 | 8.2s | 5.3MB | ❌ 白屏 |
| Webpack 基础配置 | 4.1s | 2.8MB | ✅ |
| 完整优化后 | 1.7s | 1.2MB | ✅ |
客户终于没再半夜打电话。运维小哥还请我喝了杯瑞幸（虽然是最便宜的那款）。
最后几句真心话
Webpack 确实有点重，配置也啰嗦。但现在 Vite、Parcel 虽然快，生态和定制性还是比不上 Webpack——尤其在大型项目里。作为外包老兵，我深知：能稳定交付、方便维护的方案，才是好方案。
别追求最新最炫，先把基础打牢。就像我们组长常说的：“代码是给人看的，其次才是给机器跑的。” 可读性、可维护性，永远排在花里胡哨的功能前面。
哦对了，如果你也在外包公司，建议把 Webpack 配置写得清晰点，加好注释。毕竟……下个接手的人，可能就是你自己（苦笑）。
写于一个加班的深夜，耳机里还在循环《Lo-fi Beats to Code/Relax To》。希望这篇能帮你少熬几个通宵。
评论 0