入口文件 (entry.js)
    ↓
解析 import/require
    ↓
构建模块依赖图 (Dependency Graph)
    ↓
安排不同 Loader 处理各类型文件
    ↓
输出最终 Bundle

 .sass/.scss - CSS 预处理器
 .vue        - Vue 单文件组件
 .jsx/.tsx   - React/Vue JSX 语法
 .jpg/.png   - 图片资源
 .woff/.ttf  - 字体文件

入口文件 → 依赖分析 → Loader 转换 → 输出 Bundle

// webpack.config.js
module.exports = {
  entry: './src/index.js'
};

module.exports = {
  entry: ['./src/a.js', './src/b.js']
};

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js'
  }
};

dist/
├── main.js
└── admin.js

module.exports = {
  entry: {
    // 主应用入口
    app: {
      import: './src/app.js',
      dependOn: 'react-vendors',  // 依赖共享模块
    },
    // React 相关库单独打包
    'react-vendors': {
      import: ['react', 'react-dom', 'prop-types'],
    },
    // 另一个入口，依赖共享模块
    testApp: {
      import: './src/testApp.js',
      dependOn: ['react-vendors', 'moment-vendors'],
    },
    // Moment.js 单独打包
    'moment-vendors': {
      import: 'moment',
    },
  }
};

entry: {
  testApp: {
    import: './src/testApp.js',
    dependOn: ['react-vendors'],
    runtime: 'runtime'  // 创建独立的运行时 Chunk
  }
}

步骤 1：复制配置代码
    ↓
步骤 2：创建 webpack.config.js
    ↓
步骤 3：修改为本地文件路径
    ↓
步骤 4：执行 npx webpack
    ↓
步骤 5：查看打包结果，理解配置效果

// 不配置 output 时的默认值
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出目录
    filename: '[name].js',                   // 输出文件名
  }
};

module.exports = {
  output: {
    // 输出目录（绝对路径）
    path: path.resolve(__dirname, 'dist'),
    
    // 输出文件名
    filename: 'bundle.js',
    // 或使用占位符
    filename: '[name].[contenthash].js',
    
    // 公共路径
    publicPath: 'auto',
    
    // 库文件配置
    library: {
      name: 'MyLibrary',
      type: 'umd',
    },
    
    // 清理旧文件（Webpack 5+）
    clean: true,
  }
};

output: {
  library: {
    name: 'MyLibrary',    // 库名称
    type: 'umd',          // 输出格式
    export: 'default',    // 指定导出项
  }
}

type 可选值：
┌─────────────────────────────────────────┐
│ 模块规范         │ 说明                 │
├─────────────────────────────────────────┤
│ 'var'           │ 全局变量             │
│ 'assign'        │ 全局变量赋值         │
│ 'this'          │ this 对象属性        │
│ 'window'        │ window 对象属性      │
│ 'self'          │ self 对象属性        │
│ 'global'        │ global 对象属性      │
│ 'commonjs'      │ CommonJS 规范        │
│ 'commonjs2'     │ CommonJS2 规范       │
│ 'amd'           │ AMD 规范             │
│ 'umd'           │ UMD 规范（通用）     │
│ 'module'        │ ES Module 规范       │
│ 'commonjs-module' │ CommonJS 模块      │
│ 'jsonp'         │ JSONP 加载           │
└─────────────────────────────────────────┘

output: {
  publicPath: 'auto',      // 自动推断
  publicPath: '/',         // 根路径
  publicPath: '/assets/',  // 指定路径
  publicPath: 'https://cdn.example.com/', // CDN 路径
}

源文件类型          Webpack 是否识别        Loader 转换
──────────────────────────────────────────────────────
.js                 直接识别             不需要
.json               直接识别             不需要
.ts/.tsx            不识别               ts-loader
.jsx/.tsx           不识别               babel-loader
.vue                不识别               vue-loader
.sass/.scss         不识别               sass-loader
.less               不识别               less-loader
.css                部分识别             css-loader
.jpg/.png/.gif      不识别               asset/resource
.svg                不识别               @svgr/webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,           // 匹配文件
        use: ['style-loader', 'css-loader'],  // 使用的 Loader
        include: path.resolve(__dirname, 'src'),  // 包含范围
        exclude: /node_modules/,  // 排除范围
      }
    ]
  }
};

# 搜索 TypeScript Loader
npm search webpack typescript loader

# 搜索 SVG Loader
npm search webpack svg loader

# 搜索 Sass Loader
npm search sass loader

https://github.com/webpack-contrib/awesome-webpack

// 数组形式：从右往左
use: ['style-loader', 'css-loader', 'sass-loader']

执行顺序：
sass-loader → css-loader → style-loader
    ↓              ↓              ↓
编译 Sass      转换 CSS      注入到页面

// 对象形式：从下往上
use: [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
]

执行顺序：
sass-loader（最后）
    ↓
css-loader
    ↓
style-loader（最先）

源文件: style.scss
    ↓
sass-loader: 编译 Sass → CSS
    ↓
css-loader: 解析 CSS 中的 @import、url() 等
    ↓
style-loader: 将 CSS 注入到页面 <style> 标签

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //  推荐使用 include
        include: path.resolve(__dirname, 'src'),
        //  不推荐使用 exclude（范围太大）
        // exclude: /node_modules/,
        
        //  推荐使用绝对路径
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

┌─────────────────────────────────────────────────────┐
│                 Loader                              │
├─────────────────────────────────────────────────────┤
│ 针对对象：单一类型文件                               │
│ 作用范围：文件内容转换                               │
│ 工作方式：从源文件转换为目标格式                      │
│ 示例：vue-loader 处理 .vue 文件                     │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│                 Plugin                              │
├─────────────────────────────────────────────────────┤
│ 针对对象：整个构建流程                               │
│ 作用范围：流程干预、优化、资源管理等                  │
│ 工作方式：监听构建生命周期钩子                        │
│ 示例：HtmlWebpackPlugin 生成 HTML 文件              │
└─────────────────────────────────────────────────────┘

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  plugins: [
    // 生成 HTML 文件，自动引入 JS
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    }),
    
    // 清理 dist 目录
    new CleanWebpackPlugin(),
    
    // 提取 CSS 到单独文件
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    
    // 定义环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    
    // 添加版权注释
    new webpack.BannerPlugin({
      banner: 'Copyright © 2024 MyCompany'
    }),
  ]
};

https://webpack.js.org/plugins/

module.exports = {
  mode: 'development' | 'production' | 'none'
};

// 默认开启的优化
{
  devtool: 'eval',                    // Source Map
  cache: { type: 'memory' },          // 内存缓存
  optimization: {
    minimize: false,                   // 不压缩
  }
}

// 环境变量
process.env.NODE_ENV = 'development'

// 默认开启的优化
{
  devtool: 'source-map',              // Source Map
  optimization: {
    minimize: true,                    // 压缩代码
    minimizer: [                       // 默认压缩器
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ],
    splitChunks: {                     // 代码分割
      chunks: 'all'
    },
    usedExports: true,                 // Tree Shaking
  }
}

// 环境变量
process.env.NODE_ENV = 'production'

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

module.exports = {
  // 模式
  mode: 'development',
  
  // 入口
  entry: './src/index.js',
  
  // 输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  
  // Loader
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset/resource'
      }
    ]
  },
  
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  
  // 其他配置
  devtool: 'source-map',
  devServer: {
    static: './dist',
    hot: true,
  }
};

┌──────────────────────────────────────────────┐
│  AI 工具是辅助，不是替代                       │
├──────────────────────────────────────────────┤
│   完全依赖 AI → 遇到问题束手无策             │
│   理解核心概念 + AI 辅助 → 高效且可靠        │
└──────────────────────────────────────────────┘

第一步：理解五大核心概念
├── Entry（入口）
├── Output（输出）
├── Loader（加载器）
├── Plugin（插件）
└── Mode（模式）

第二步：对照配置文档
└── 概念与配置一一对应，左右分屏学习

第三步：动手实践
├── 复制配置示例
├── 本地运行打包
└── 观察输出结果

第四步：扩展学习
├── devServer（开发服务器）
├── cache（缓存）
├── optimization（优化配置）
└── 其他高级配置