Webpack

Webpack 更像一个高度可编排的构建平台。它没有 Vite 那么轻，但在复杂项目、老项目和深度定制场景里依然很常见。

Webpack 主要做什么

• 从入口文件出发收集依赖
• 用 loader 处理不同类型的模块
• 用 plugin 扩展构建能力
• 输出一个或多个可部署的 bundle

三个核心概念

1. Entry / Output

• entry：从哪里开始构建
• output：最终产物输出到哪里

2. Loader

loader 用来把“Webpack 默认不认识的东西”转换成它能处理的模块。

常见例子：

• babel-loader
• css-loader
• style-loader

3. Plugin

plugin 用来扩展整个构建流程，比如：

• 生成 HTML
• 提取 CSS
• 清理构建目录
• 注入环境变量

基础配置示例

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
};

什么时候更适合用 Webpack

• 维护已有老项目
• 需要复杂 loader / plugin 定制
• 构建链路里有比较强的历史包袱

使用建议

• 学习时先理解依赖图、loader、plugin 这三个核心概念
• 真正在项目里排查问题时，优先看入口、模块规则、插件链和产物输出
• 如果只是做现代单页应用，新项目通常不必强行从 Webpack 起步