Webpack 核心概念：entry、output、loader、plugin、mode、module 解析规则

如果你刚接触 Webpack，可能会被一堆配置项吓到。说白了，Webpack 的核心就六个东西：入口、出口、加载器、插件、模式、模块解析。我个人习惯把这六个概念当成打包流水线上的六个工位，每个工位各司其职。这一章，咱们一个一个捋清楚。

1. entry – 打包的起点

entry 告诉 Webpack 从哪个文件开始分析依赖。我习惯用字符串指定单入口，对象指定多入口。

// 单入口
module.exports = {
  entry: './src/index.js'
};

// 多入口（比如多页面）
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  }
};

注意 context 配置。我第一次用 Webpack 时没设置 context，结果路径解析各种报错。后来我统一把 context 指向项目根目录，就再也没踩过坑。

2. output – 打包后放哪

output 决定产物的位置和名字。必须指定 path（路径）和 filename。多入口时用 [name] 占位符。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  }
};

我曾经在生产环境忘了配置 publicPath，导致 CDN 上的资源路径全错。publicPath 就是资源被引用时的 URL 前缀，如果你把静态资源部署到 CDN，一定要设置。

3. loader – 把文件转成 Webpack 能处理的模块

Webpack 默认只认 JS 和 JSON。遇到 CSS、图片、字体 —— 对不起，不处理。这个时候就需要 loader。每个 loader 都是一个转换函数，比如 babel-loader 转 ES6+，css-loader 解析 CSS，style-loader 把 CSS 插入页面。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 从右到左执行
      },
      {
        test: /\.(png|jpg)$/,
        type: 'asset/resource' // Webpack 5 内置资源模块
      }
    ]
  }
};

4. plugin – 做 loader 做不到的事

Loader 专注于文件转换，plugin 则能干更高级的活：打包优化、资源管理、环境变量注入。plugin 是一个带有 apply 方法的类或构造函数。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

记得有一次我为了压缩 JS 和 CSS，手动写了很长一段 minifier 配置，后来发现 mode: 'production' 内置的 TerserPlugin 已经自动开启了压缩。你想想看，有时候简化配置比堆砌插件更有效。

5. mode – 一键切换开发/生产模式

mode 就三个值：development、production、none。production 模式下会自动启用代码压缩、作用域提升、tree shaking 等优化。development 模式会提供详细的错误提示和更快的构建速度。

// 命令行
webpack --mode=production

// 配置文件
module.exports = {
  mode: 'production'
};

6. module 解析规则 – 帮 Webpack 找到模块

resolve 配置影响模块的解析方式。最常用的是 extensions（自动补全后缀）和 alias（路径别名）。

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
};

用了 alias 之后，你再也不用写 ../../../../components 这种恶心路径了。我所有 Vue/React 项目都配一个 @/ 指向 src，简洁又清晰。

---

上面的六个概念，其实并不复杂。很多人觉得 Webpack 难，是因为同时接触太多配置项。我建议你先把 entry、output、loader、plugin 这四个基础搭起来，再用 mode 和 resolve 做微调。下面这张表格可以帮你快速回顾每个配置的关键作用：

配置项	核心作用	常用属性/子配置
entry	定义打包入口文件	string / object / array
output	指定输出路径与文件名	path, filename, publicPath, clean
loader	转换非 JS 模块	test, use, exclude, include
plugin	执行复杂任务（如生成 HTML、提取 CSS）	每个 plugin 实例化传入 options
mode	设置构建环境，启用内置优化	development / production / none
resolve	控制模块如何被解析	extensions, alias, modules