核心概念：entry / output / mode 配置你的第一次构建

本节目标

不写配置时 Webpack 也能跑（默认入口 ./src/index.js、输出 ./dist/main.js）。但真实项目一定需要一份 webpack.config.js 来明确「入口是谁、产物放哪、按什么模式构建」。

// webpack.config.js
// 运行环境：Node.js 16+；执行 npx webpack（它会自动读取本文件）
const path = require('path')

module.exports = {
  // 入口：Webpack 从哪个文件开始「顺藤摸瓜」收集依赖
  entry: './src/index.js',

  // 输出：打包产物写到哪、叫什么
  output: {
    path: path.resolve(__dirname, 'dist'), // 必须是绝对路径
    filename: 'bundle.js',                 // 产物文件名
    clean: true,                           // 每次构建先清空 dist（webpack5 支持）
  },

  // 模式：development（不压缩、带注释，便于调试）/ production（压缩优化）/ none
  mode: 'development',
}

跑 npx webpack，你会在 dist/bundle.js 看到打包结果。mode: 'production' 会自动开启压缩（Terser）和大量优化，文件更小但更难读；development 相反，适合本地看产物。

多入口也很常见——比如一个后台页、一个前台页：

// 多入口：key 是「入口名」，value 是入口文件
module.exports = {
  entry: {
    home: './src/home.js',
    admin: './src/admin.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    // [name] 会替换成入口名 home / admin，避免文件名冲突
    filename: '[name].bundle.js',
    clean: true,
  },
  mode: 'production',
}

用 [name] 占位符，Webpack 会为每个入口生成 home.bundle.js 和 admin.bundle.js。

名词解释

入口（Entry）：Webpack 构建的起点文件，它及其所有 import 构成了这张依赖图的根。

输出（Output）：规定产物「文件名叫什么、放哪个目录」。filename 支持 [name]/[contenthash] 等占位符。

模式（Mode）：development/production/none 三选一。它会自动帮你打开/关闭一系列内置优化，是最重要的「一键开关」。

ContentHash（内容哈希）：把文件内容算成一段哈希放进文件名（如 bundle.[contenthash].js）。内容不变则文件名不变，浏览器可长期缓存；内容一变文件名就变，自动破缓存。

课后练习

练习 1：output.path 一定要写绝对路径吗？能不能写 './dist'？

答案：强烈建议绝对路径。path.resolve(__dirname, 'dist') 是标准写法；写相对路径在有些环境下会解析到错误目录，踩坑概率高。__dirname 是当前配置文件所在目录。

练习 2：mode: 'production' 和手动开 optimization.minimize: true 是什么关系？

答案：设置为 production 时，Webpack 会自动把 optimization.minimize 打开（用 Terser 压缩）。你也可以显式写 optimization.minimize，但日常直接用 mode 更省事，它是「一揽子优化预设」。

总结

webpack.config.js 的核心三角就是 entry（从哪收）、output（吐到哪）、mode（怎么优化）。绝大多数项目这几行就能跑起来；多入口用「对象形式的 entry + [name] 占位符」即可优雅解决。我的经验：先让 mode: 'development' 跑通，确认产物正确，再切 production 看优化结果——别一上来就 debug 压缩后的代码。下一节我们引入 loader，让 Webpack 能处理 JS 以外的世界。