Webpack 构建配置

Webpack 是前端工程化的「打包中枢」，把 JS、CSS、图片等资源视作模块，统一处理依赖、转换与打包。虽然 Vite 等新一代工具越来越流行，但理解 Webpack 的核心概念仍是看懂大量历史项目与脚手架的前提。这篇笔记把核心概念、Loader、Plugin、优化配置与 Vite 对比五块讲清楚。

一、核心概念

Webpack 五大核心：入口 entry、出口 output、Loader、Plugin、模式 mode。最小可运行配置：

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",            // development | production
  entry: "./src/index.js",       // 打包入口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash:8].js",
    clean: true,                 // 每次构建清空 dist
  },
  module: { rules: [] },          // Loader 配置
  plugins: [],                    // Plugin 配置
};

模式决定默认优化：development 关闭压缩开启 sourcemap，production 开启压缩与 Tree Shaking。

二、Loader：处理非 JS 资源

Loader 让 Webpack 能解析 CSS、图片、字体等资源。常用规则如下：

module: {
  rules: [
    // 处理 CSS，生产环境抽离到独立文件
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader", "postcss-loader"],
    },
    // 处理 Sass/SCSS
    { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
    // 处理图片（Webpack5 内置资源模块）
    {
      test: /\.(png|jpe?g|gif|webp|svg)$/,
      type: "asset",
      parser: { dataUrlCondition: { maxSize: 8 * 1024 } }, // 8kb 以下转 base64
    },
    // 处理 JS：Babel 转译
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } },
    },
  ],
}

Loader 执行顺序：从右到左、从下到上。CSS 链路写成 ["style-loader", "css-loader", "postcss-loader"] 才正确。

三、Plugin：扩展构建能力

Plugin 介入整个构建生命周期，做压缩、生成 HTML、抽取 CSS 等事：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    // 自动注入打包产物到 HTML 模板
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    // 抽离 CSS 到独立文件（生产环境）
    new MiniCssExtractPlugin({ filename: "[name].[contenthash:8].css" }),
  ],
  // 生产环境替换 style-loader 为 MiniCssExtractPlugin.loader
};

四、优化配置

生产环境优化主要围绕「分包、缓存、压缩」三件事：

module.exports = {
  optimization: {
    // 代码分割：vendor 单独成包，利用浏览器缓存
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
    runtimeChunk: "single",       // 运行时代码单独成包
    minimize: true,
  },
  performance: {
    maxAssetSize: 300 * 1024,     // 单文件超 300kb 提示
    hints: "warning",
  },
};

配合 [contenthash] 文件名、Tree Shaking（生产模式自动，需 ES Module 静态导入）、按需加载 import("./page").then()，能把首屏体积压到合理范围。

五、Webpack vs Vite 对比

新一代工具 Vite 用原生 ESM 做开发，启动飞快，但 Webpack 仍有大量项目在用。简要对比如下：

• 开发启动：Webpack 全量打包后启动，大项目慢；Vite 按需编译，启动几乎秒级。
• 构建产物：两者都用 Rollup/自身打包，Webpack 生态插件更丰富。
• 适用场景：新项目优先 Vite；存量大型项目或依赖特定 Webpack 插件时继续用 Webpack。

不必把两者对立——理解 Webpack 概念后迁移到 Vite 几乎无门槛，配置思想是相通的。

小结

Webpack 的核心是「入口 → Loader 转换 → Plugin 扩展 → 出口打包」。先吃透五大概念，再按生产优化清单做分包与缓存，最后理解 Vite 的差异，前端构建链路就打通了。