为什么写这篇：Webpack 4 在 2018-02 正式发布（zero-config 概念），5 在 2018 之后逐步成为标准。即使 2024 年 Vite/Rspack 已经在性能上超越 Webpack，老项目的维护、monorepo 工具链、底层 loader 插件开发仍离不开它。理解 Webpack 的"打包图"思想，是所有前端工程化工具的根。

适用读者：刚开始接触前端构建工具的同学；想从零跑通"写 ES6 → 浏览器能跑"全流程的初学者。

前置知识：会写 npm install、了解 package.json、写过简单 HTML/JS。

目录

1. 什么是 Webpack
2. 最小可跑 demo
3. Babel：让"新语法"跑到"老浏览器"
4. 为什么需要 –save 和 –save-dev
5. 常见 loader / plugin 一览
6. 从 Webpack 1 到 5：核心演进
7. 常见问题与排错

1. 什么是 Webpack

Webpack 是一个静态模块打包器（static module bundler）。它从入口文件（entry）出发，递归解析所有 import/require，把 JS、CSS、图片、字体等所有静态资源当作"模块"处理，最终输出浏览器能直接加载的静态文件（bundle）。

核心思想：一切皆模块。import './style.css' 在 Webpack 眼里和 import './utils.js' 一样——只是需要不同的 loader 来"翻译"。

Webpack 4 大核心概念：

2. 最小可跑 demo

1
2
3
4
5

mkdir webpack-demo1 && cd webpack-demo1
npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash
npx webpack

跑完会生成 dist/main.js。完整目录：

1
2
3
4
5
6
7
8

webpack-demo1/
├── dist/
│   └── main.js              # 打包后的产物
├── node_modules/
├── package.json
├── package-lock.json
└── src/
    └── index.js             # 你的入口文件

src/index.js：

1
2
3
4
5
6
7
8
9

import _ from 'lodash'

function component() {
  const element = document.createElement('div')
  element.innerHTML = _.join(['Hello', 'webpack'], ' ')
  return element
}

document.body.appendChild(component())

跑 npx webpack 时，Webpack 会自动：

1. 把 src/index.js 当作入口
2. 解析 import _ from 'lodash' → 把 lodash 整包也打进来
3. 把 dist/main.js 作为默认输出

默认约定：Webpack 4+ 引入 zero-config 概念，不写 webpack.config.js 也能跑——entry 默认为 src/index.js，output 默认为 dist/main.js，mode 默认为 production。

3. Babel：让"新语法"跑到"老浏览器"

Babel 是一个 JavaScript 编译器（准确说叫"转译器" transpiler）：

• 输入：用下一代 JavaScript 语法（ES2015+、JSX、TypeScript）写的代码
• 输出：浏览器能兼容的 JavaScript 代码

1
2
3
4
5
6
7

// 输入（你写的）
const greet = (name) => `Hello, ${name}!`

// 输出（babel 编译后）
var greet = function greet(name) {
  return 'Hello, ' + name + '!'
}

Why：浏览器的 JavaScript 引擎对新语法的支持永远滞后于规范。2015 年 ES2015 发布时，主流浏览器（IE11、UC、老 Safari）都不支持 const / 箭头函数 / class。Babel 让开发者能写"未来语法"，由它编译到"老语法"。

3.1 Webpack 集成 Babel 7

1

npm install -D babel-loader @babel/core @babel/preset-env

webpack.config.js：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

@babel/preset-env 是"智能预设"——你告诉它目标浏览器范围（browserslist 配置），它自动决定要转译哪些语法。

package.json 加上 browserslist：

1
2
3
4
5
6
7
8

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "ie >= 11"
  ]
}

小贴士：现代项目（Chrome 90+、Node 18+）可以直接在 browserslist 里写 "defaults, not IE 11"，Babel 就只对真正需要的目标做 polyfill，bundle 体积能少 30%+。

4. 为什么需要 –save 和 –save-dev

这是新人最容易搞混的概念：

1
2

npm install webpack webpack-cli --save-dev   # 构建工具，上线不需要
npm install lodash --save                    # 运行时要用 lodash

执行 npm install（不带包名）时，npm 会同时安装 dependencies 和 devDependencies 中的所有模块。生产环境（npm install --production 或 NODE_ENV=production）只装 dependencies。

小贴士：Vue/React 框架本身（vue、react、react-dom）要 --save，而 vue-loader、@babel/preset-env、webpack、eslint 都要 --save-dev。

5. 常见 loader / plugin 一览

Webpack 5 重要变化：

1. 资源模块（Asset Modules） 内置了 4 种类型（asset/resource / asset/inline / asset/source / asset），不再需要 file-loader / url-loader
2. 持久化缓存 默认开启，构建速度提升 5-10 倍
3. Module Federation 微前端方案正式 GA
4. Tree Shaking 加强，对 CommonJS、sideEffects 字段支持更好

6. 从 Webpack 1 到 5：核心演进

大版本迁移痛点：Webpack 4 → 5 主要是 file-loader/url-loader/raw-loader 替换为 asset modules，以及 node-polyfill-webpack-plugin 处理内置模块的 polyfill（如 crypto、buffer）。

7. 常见问题与排错

7.1 报错 “Module not found”

99% 是路径写错。Webpack 5 默认不允许绝对路径，必须写相对路径或配 resolve.alias。

1
2
3
4
5
6

// webpack.config.js
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

7.2 报错 “Can’t resolve ‘vue’ in …”

依赖没装对版本，或在 vue.config.js 配了 externals 但忘记在 HTML 里用 CDN 引。先 rm -rf node_modules && npm install 排除 80% 情况。

7.3 构建慢 / 体积大

7.4 浏览器缓存命中低

1
2
3
4

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

contenthash 是内容哈希——文件没变，文件名不变，浏览器强缓存命中；文件改了，文件名变，强制刷新。

小结：Webpack 学习路线

1. 会用：跑通 npx webpack 跑一个 demo → 配 webpack.config.js 加上 babel/css-loader
2. 会配：理解 entry/output/loader/plugin/mode 五大件
3. 会调：会用 splitChunks / contenthash / analyzer 优化产物体积
4. 会写 loader/plugin：读懂 Webpack 的 tapable 钩子系统，写一个自定义插件
5. 会迁移：Webpack 4 → 5，老项目升级

下一步：2024 年起，更多新项目直接用 Vite（开发时按需 ESM、生产时 Rollup 打包），启动速度比 Webpack 快 10-100 倍。但 Vite 的生产构建底层还是 Rollup，且大量 Vite 插件的接口与 Webpack 兼容。本文讲的 loader/plugin 思想 100% 适用。

参考资料

• Webpack 官方文档（中文）
• Babel 官方文档
• Webpack 5 Release Notes
• 《前端工程化：体系化的前端工程实践》— 张云龙