如何理解 Webpack 配置底层结构逻辑？

module.exports = {
  // 单入口
  entry: './src/index.js',
  
  // 多入口（对象语法）
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  
  // 多入口（数组语法 - 多个依赖文件）
  entry: {
    main: ['./src/polyfills.js', './src/index.js']
  }
};

module.exports = {
  context: path.resolve(__dirname, 'app'),
  entry: './index' // 实际解析为 <context>/index.js
};

module.exports = {
  output: {
    // === 基础配置 ===
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    publicPath: 'https://cdn.example.com/',
    
    // === v5.20+ 新增：output.clean ===
    clean: {
      dry: false,        // 不删除文件，只记录将被删除的文件
      keep: /\/assets/,  // 保留匹配的文件
      manifest: 'manifest.json', // 输出被删除文件的清单
    },
    
    // === v5.107 新增：output.module (ESM Output) ===
    module: true,  // 启用 ESM 输出格式
    
    // === v5.107 新增：CSS 文件名配置 ===
    cssFilename: 'static/css/[name].[contenthash:8].css',
    cssChunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
    
    // === v5.107 新增：环境配置 ===
    environment: {
      arrowFunction: false,   // 不支持箭头函数
      bigIntLiteral: false,   // 不支持 BigInt 字面量
      const: false,           // 不支持 const/let
      destructuring: false,   // 不支持解构赋值
      forOf: false,           // 不支持 for...of
      module: false,          // 不支持 module 语法
    },
    
    // === v5.107 新增：比较后发出 ===
    compareBeforeEmit: true,  // 在写入前比较内容，避免不必要的写入
    
    // === 其他常用配置 ===
    library: {
      name: 'MyLibrary',
      type: 'umd',     // 'var' | 'module' | 'assign' | 'assign-properties' | 'this' | 'window' | 'self' | 'global' | 'commonjs' | 'commonjs2' | 'commonjs-module' | 'commonjs-static' | 'amd' | 'amd-require' | 'umd' | 'umd2' | 'system' | 'script' | 'module'
      export: 'default',
    },
    chunkFilename: '[id].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[hash][ext][query]',
  }
};

// webpack.config.js
module.exports = {
  experiments: {
    outputModule: true,
  },
  output: {
    filename: '[name].mjs',
    module: true,
    library: {
      type: 'module',
    },
  },
};

// 传统 CommonJS 输出
(function(modules) {
  // webpack bootstrap...
})({
  "./src/index.js": (function(module, exports) {
    eval("...");
  })
});

// ESM 输出（output.module: true）
import { __webpack_require__ } from "webpack-runtime";
const __webpack_exports__ = {};
import { foo } from "./foo.js";
// ... 直接使用 ESM 语法
export default __webpack_exports__;

output: {
  clean: true,  // 简单模式：清理整个 dist 目录
  
  // 高级模式
  clean: {
    dry: true,                    // 模拟清理（不实际删除）
    keep: /ignored/,              // 保留匹配的文件/目录
    keepStaticAssets: true,       // 保留静态资源
    manifest: 'clean-manifest.json', // 输出清理清单
  },
}

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
    },
    extensions: ['.js', '.json', '.ts', '.tsx', '.vue'],
    modules: ['node_modules', 'src/libs'],
    mainFiles: ['index'],
    symlinks: true,
    cacheWithContext: false,
    
    // v5 新增：完全解析前先检查文件是否存在
    enforceExtension: false,
    
    // v5 新增：导出字段解析
    exportsFields: ['exports'],
    importsFields: ['imports'],
    conditionNames: ['webpack', 'production', 'browser'],
  },
  
  resolveLoader: {
    modules: ['node_modules', 'loaders'],
    extensions: ['.js'],
    mainFields: ['loader', 'main'],
  },
};

module.exports = {
  module: {
    // v5 推荐写法：使用 rules + use
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[hash:base64:8]',
              },
            },
          },
          'postcss-loader',
        ],
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        
        // v5 新增：资源模块类型
        type: 'javascript/auto',  // 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'javascript/auto' | 'javascript/esm' | 'json'
        
        // v5 新增：解析器配置
        parser: {
          javascript: {
            dynamicImportMode: 'lazy',
            dynamicImportPrefetch: false,
          },
        },
        
        // v5 新增：生成器配置
        generator: {
          filename: 'static/images/[hash][ext][query]',
          publicPath: 'https://cdn.example.com/',
        },
        
        // 条件匹配（可组合使用）
        oneOf: [...],  // 只应用第一个匹配的规则
        resourceQuery: /inline/,  // 匹配查询字符串
      },
      
      // 资源模块示例（v5 内置，无需 loader）
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]',
        },
      },
      
      {
        test: /\.txt$/i,
        type: 'asset/source',  // 内联为字符串
      },
    ],
    
    // v5 新增：不解析的模块配置
    noParse: /jquery|lodash/,
    
    // v5 新增：未知模块的处理方式
    unknownContextRequest: '.',
    unknownContextRecursive: true,
    unknownContextRegExp: /^\.\//,
    unknownContextCritical: true,
  },
};

module.exports = {
  externals: {
    // 基本用法：全局变量
    jquery: 'jQuery',
    
    // CommonJS 模块
    lodash: 'commonjs lodash',
    
    // CommonJS2 模块
    'library-name': 'commonjs2 library-name',
    
    // AMD 模块
    react: 'amd react',
    
    // 完整对象语法
    'library-name': {
      commonjs: 'library-name',
      commonjs2: 'library-name',
      amd: 'library-name',
      root: 'LibraryName',
    },
    
    // 正则匹配
    /^lodash$/: 'lodash',
    
    // 函数形式（高级用法）
    function ({ request, dependencyType }, callback) {
      if (/^@angular/.test(request)) {
        return callback(null, `commonjs ${request}`);
      }
      callback();
    },
  },
};

module.exports = {
  optimization: {
    // === 代码分割 ===
    splitChunks: {
      chunks: 'async',  // 'initial' | 'async' | 'all'
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          name: 'default',
        },
      },
    },
    
    // === 运行时代码提取 ===
    runtimeChunk: {
      name: 'runtime',
    },
    
    // === 最小化压缩 ===
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
          format: {
            comments: false,
          },
        },
        extractComments: false,
        parallel: true,
      }),
      new CssMinimizerPlugin(),
    ],
    
    // === Scope Hoisting ===
    usedExports: true,
    sideEffects: true,
    
    // === 模块 ID 优化 ===
    moduleIds: 'deterministic',  // 'natural' | 'named' | 'deterministic' | 'size' | 'hashed'
    chunkIds: 'deterministic',
    
    // === 其他优化选项 ===
    removeAvailableModules: false,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,
    flagIncludedChunks: false,
    portableRecords: false,
    realContentHash: false,
    innerGraph: false,  // v5 新增：内部图分析
    mangleWasmImports: false,  // v5 新增：WASM 导出名混淆
    concatenateModules: true,  // v5 增强：作用域提升
  },
};

module.exports = {
  target: 'web',  // 默认值
  
  // 支持的目标列表：
  // 'web' - 浏览器环境（默认）
  // 'webworker' - Web Worker
  // 'node' - Node.js 环境（使用 require 加载 chunk）
  // 'async-node' - Node.js 环境（异步加载 chunk）
  // 'electron-main' - Electron 主进程
  // 'electron-renderer' - Electron 渲染进程
  // 'node-webkit' - NW.js
  
  // 也可以指定版本号
  target: ['web', 'es2020'],
  target: 'browserslist',  // 使用 browserslist 配置
  
  // v5 新增：精细控制目标特性
  target: false,  // 不设置任何目标
};

module.exports = {
  mode: 'production',  // 推荐
  // mode: 'development',
  // mode: 'none',
};

module.exports = {
  experiments: {
    // === CSS 原生支持 (v5.x) ===
    css: true,
    
    // === HTML 原生支持 (v5.x) ===
    html: true,
    
    // === TypeScript 原生支持 (v5.x) ===
    typescript: true,
    
    // === Source Import (v5.106+) ===
    sourceImport: true,
    
    // === Defer Import Evaluation (v5.x) ===
    deferImport: true,
    
    // === Future Defaults (v5.x) ===
    futureDefaults: true,
    
    // === Lazy Compilation (v5.x) ===
    lazyCompilation: {
      entries: false,
      imports: true,
      tests: /\.lazy\.js$/,
    },
    
    // === Build HTTP (v5.x) ===
    buildHttp: {
      allowedUris: [/^https:/],
      cacheLocation: false,
      frozen: false,
      lockfile: path.resolve(__dirname, 'http-cache.lock'),
      upgrade: true,
    },
    
    // === Cache Unaffected (v5.x) ===
    cacheUnaffected: true,
    
    // === Output Module (ESM) (v5.x) ===
    outputModule: true,
  },
};

experiments: {
  css: true,
}

// webpack.config.js
module.exports = {
  experiments: {
    css: true,
  },
  output: {
    cssFilename: 'static/css/[name].[contenthash:8].css',
  },
};

// index.js
import styles from './styles.css';
// 或
import './styles.css';

experiments: {
  html: true,
}

experiments: {
  typescript: true,
}

experiments: {
  sourceImport: true,
}

// 传统方式
import imageUrl from './image.png?inline';
import svgContent from './icon.svg?raw';

// sourceImport 方式（更语义化）
import imageUrl from source './image.png';
import svgContent from source './icon.svg';

experiments: {
  lazyCompilation: {
    entries: false,       // 是否懒编译入口
    imports: true,        // 是否懒编译动态导入
    tests: /\.lazy\.js$/, // 匹配需要懒编译的模块
  },
}

experiments: {
  buildHttp: {
    allowedUris: [/^https:\/\/cdn\.example\.com/],  // 允许的 URL 列表
    cacheLocation: path.resolve(__dirname, '.http-cache'),  // 缓存位置
    frozen: false,  // 是否锁定缓存（CI/CD 时设为 true）
    lockfile: path.resolve(__dirname, 'http-cache.lock'),  // 锁文件
    upgrade: false,  // 是否升级过期的缓存
  },
}

// 直接导入远程资源
import React from 'https://cdn.example.com/react@18.0.0.esm.js';
import _ from 'https://cdn.example.com/lodash-es@4.17.21.esm.js';

experiments: {
  deferImport: true,
}

experiments: {
  futureDefaults: true,
}

experiments: {
  cacheUnaffected: true,
}

module.exports = {
  // === 基础配置 ===
  cache: {
    type: 'filesystem',  // 'memory' | 'filesystem'
    
    // === filesystem 类型专属配置 (v5.20+) ===
    cacheDirectory: path.resolve(__dirname, '.webpack_cache'),  // 缓存目录
    name: `${process.env.NODE_ENV}`,  // 缓存名称（多环境隔离）
    
    // === v5.85+ 新增：压缩配置 ===
    compression: 'gzip',  // false | 'gzip' | 'brotliCompress'
    
    // === v5.85+ 新增：最大缓存年龄 ===
    maxAge: 1000 * 60 * 60 * 24 * 7,  // 7 天（毫秒）
    
    // === v5.85+ 新增：只读模式 ===
    readonly: process.env.NODE_ENV === 'production',  // 生产环境只读
    
    // === v5 新增：性能分析 ===
    profile: true,  // 记录详细的缓存性能数据
    
    // === v5 新增：版本控制 ===
    version: '1.0.0',  // 自定义版本号（配置变更时失效）
    buildDependencies: {
      config: [__filename],  // 配置文件依赖
      webpack: require('webpack/package.json').version,  // Webpack 版本
    },
    
    // === 其他配置 ===
    allowCollectingMemory: true,  // 允许收集内存使用情况
    managedPaths: [path.resolve(__dirname, 'node_modules')],  // 受管理的路径
    immutablePaths: [],  // 不可变路径（如 monorepo 共享依赖）
    store: 'pack',  // 'pack' | 'input'
  },
};

cache: {
  type: 'filesystem',
  compression: 'gzip',  // 使用 gzip 压缩缓存文件
  // compression: 'brotliCompress',  // 使用 brotli 压缩（更高压缩率）
  // compression: false,  // 不压缩
}

cache: {
  type: 'filesystem',
  maxAge: 1000 * 60 * 60 * 24 * 7,  // 7 天
  // maxAge: Infinity,  // 永不过期
}

cache: {
  type: 'filesystem',
  readonly: process.env.NODE_ENV === 'production',
}

// 开发环境：读写模式
// NODE_ENV=development → readonly: false

// 生产环境：只读模式
// NODE_ENV=production → readonly: true
// CI 从共享存储读取缓存，但不写入

cache: {
  type: 'filesystem',
  profile: true,
}

npx webpack --profile --json > stats.json

cache: {
  type: 'filesystem',
  version: '1.0.0',  // 自定义版本字符串
}

const pkg = require('./package.json');

module.exports = {
  cache: {
    type: 'filesystem',
    version: `${pkg.version}-${pkg.dependencies.webpack | | 'builtin'}`,
  },
};

// webpack.dev.config.js
module.exports = {
  mode: 'development',
  cache: {
    type: 'filesystem',
    compression: false,  // 不压缩，最快
    maxAge: Infinity,    // 永不过期
    readonly: false,     // 读写模式
    profile: false,      // 不记录性能数据
  },
};

// webpack.prod.config.js
module.exports = {
  mode: 'production',
  cache: {
    type: 'filesystem',
    compression: 'gzip',  // 平衡空间和速度
    maxAge: 1000 * 60 * 60 * 24 * 7,  // 7天
    readonly: true,       // 只读模式（CI 场景）
    profile: true,        // 记录性能数据
    version: require('./package.json').version,
  },
};

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

module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/webpack'),
    managedPaths: [
      path.resolve(__dirname, '../node_modules'),
    ],
    immutablePaths: [
      // 共享依赖不会变化，可以标记为不可变
      path.resolve(__dirname, '../node_modules/react'),
      path.resolve(__dirname, '../node_modules/react-dom'),
    ],
  },
};

module.exports = {
  validate: {
    // 启用严格模式验证
    strict: true,
    
    // 自定义验证规则
    rules: {
      // 示例：验证 output.path 必须存在
      'output.path': (value) => {
        if (!value) {
          throw new Error('output.path is required');
        }
      },
    },
  },
};

module.exports = {
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000,
  },
};

module.exports = {
  // 开发环境推荐
  devtool: 'eval-cheap-module-source-map',
  
  // 生产环境推荐
  // devtool: 'source-map',  // 生成独立的 .map 文件
  // devtool: 'hidden-source-map',  // 生成但不引用
  // devtool: 'nosources-source-map',  // 生成但没有源码内容
  
  // 更多选项：
  // '(empty)' - 不生成 sourcemap
  // 'eval' - 每个 module 封装到 eval 中，速度快
  // 'cheap-eval-source-map' - 不含列信息
  // 'cheap-module-eval-source-map' - 不含列信息，来源为原始源码
  // 'eval-source-map' - 每个 module 封装到 eval 中
  // 'cheap-source-map' - 不含列信息，独立文件
  // 'cheap-module-source-map' - 不含列信息，来源为原始源码，独立文件
  // 'inline-source-map' - 以 DataURL 内联
  // 'cheap-inline-source-map' - 不含列信息，内联
  // 'cheap-module-inline-source-map' - 不含列信息，来源为原始源码，内联
  // 'inline-source-map' - 内联
};

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    hot: true,  // HMR
    open: true,  // 自动打开浏览器
    historyApiFallback: true,  // SPA 路由支持
    proxy: {
      '/api': 'http://localhost:3000',
    },
    client: {
      overlay: {  // 错误覆盖层
        errors: true,
        warnings: false,
      },
      progress: true,  // 进度条
    },
    devMiddleware: {
      writeToDisk: true,  // 写入磁盘
    },
  },
};

module.exports = {
  performance: {
    hints: 'warning',  // false | 'error' | 'warning'
    maxEntrypointSize: 512000,  // 500KB
    maxAssetSize: 512000,
    assetFilter: function(assetFilename) {
      return !assetFilename.endsWith('.map');  // 忽略 map 文件
    },
  },
};

module.exports = {
  stats: {
    // 基础选项
    all: undefined,  // false | true
    assets: true,
    assetsSort: '!size',
    cached: true,
    cachedAssets: true,
    children: true,
    chunks: true,
    chunkGroups: true,
    chunkModules: true,
    chunkOrigins: true,
    color: true,
    depth: false,
    entrypoints: true,
    env: true,
    errorDetails: true,
    errors: true,
    errorsCount: true,
    hash: true,
    logging: 'info',  // 'none' | 'error' | 'warn' | 'info' | 'log'
    loggingDebug: [],
    loggingTrace: false,
    modules: true,
    modulesSort: '!size',
    moduleTrace: true,
    performance: true,
    providedExports: true,
    reasons: true,
    source: true,
    timings: true,
    usedExports: true,
    version: true,
    warnings: true,
    warningsCount: true,
    
    // 预设值
    // 'errors-only' | 'errors-warnings' | 'minimal' | 'none' | 'normal' | 'verbose' | 'detailed'
    preset: 'normal',
  },
};

module.exports = {
  infrastructureLogging: {
    level: 'info',  // 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'
    debug: /webpack/,  // 过滤器
    stream: process.stdout,  // 输出流
    appendOnly: false,  // 是否追加模式
    colors: true,  // 彩色输出
    prefix: 'webpack:',  // 前缀
  },
};

const fs = require('fs');

module.exports = {
  infrastructureLogging: {
    stream: fs.createWriteStream('webpack.log', { flags: 'a' }),
  },
};

// v4 可以直接使用
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
// Webpack 会自动将这些替换为 browserify 兼容的实现

// v5 会报错！
// Can't resolve 'fs' in '...'
const fs = require('fs');

npm install node-polyfill-webpack-plugin

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  plugins: [
    new NodePolyfillPlugin(),
  ],
};

module.exports = {
  resolve: {
    fallback: {
      "buffer": require.resolve("buffer/"),
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "util": require.resolve("util/"),
      "assert": require.resolve("assert/"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "url": require.resolve("url/"),
      "path": false,  // 如果不需要可以设为 false
      "fs": false,     // 浏览器环境通常不支持
      "zlib": require.resolve("browserify-zlib"),
    },
  },
};

{
  "exports": {
    ".": {
      "browser": "./dist/browser.js",
      "default": "./dist/node.js"
    }
  }
}

// ❌ v5 不再支持
module.exports = {
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel-loader'],  // 这个字段已移除
    }],
  },
};

// ✅ v5 必须使用 use
module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader'],  // 只能使用 use
    }],
  },
};

.
├── src
│   ├── index.ts           # TypeScript 入口
│   ├── App.vue            # Vue 组件
│   ├── styles.less        # Less 样式
│   └── assets
│       └── logo.png       # 图片资源
├── public                 # 静态资源
├── webpack.config.ts      # TypeScript 配置文件 (webpack-cli 7)
├── tsconfig.json
└── package.json

// webpack.config.ts
import path from 'path';
import { Configuration } from 'webpack';

const config: Configuration = {
  mode: 'production',
  
  entry: {
    main: './src/index.ts',
  },
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/',
    clean: true,  // v5.20+: 自动清理
    module: true,  // v5.107: ESM 输出
    environment: {
      arrowFunction: false,
      bigIntLiteral: false,
    },
  },
};

export default config;

config.module = {
  rules: [
    // TypeScript (使用 experiments.typescript 可省略此规则)
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
          },
        },
      ],
      exclude: /node_modules/,
    },
    
    // Vue 单文件组件
    {
      test: /\.vue$/,
      use: 'vue-loader',
    },
    
    // Less/Sass (如果启用了 experiments.css，可省略)
    {
      test: /\.less$/i,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[local]_[hash:base64:5]',
            },
          },
        },
        'less-loader',
      ],
    },
    
    // 图片资源 (v5 内置 Asset Modules)
    {
      test: /\.(png|jpe?g|gif|svg|webp)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'images/[hash][ext][query]',
      },
    },
    
    // 字体资源
    {
      test: /\.(woff2?|eot|ttf|otf)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'fonts/[hash][ext][query]',
      },
    },
  ],
};

config.resolve = {
  extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.vue'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
    vue$: 'vue/dist/vue.runtime.esm-bundler.js',
  },
  conditionNames: ['webpack', 'production', 'browser'],
};

config.optimization = {
  minimize: true,
  usedExports: true,
  sideEffects: true,
  concatenateModules: true,
  
  runtimeChunk: 'single',
  
  splitChunks: {
    chunks: 'all',
    maxSize: 244000,  // 244KB
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: -10,
        reuseExistingChunk: true,
      },
      common: {
        name: 'common',
        minChunks: 2,
        chunks: 'initial',
        priority: -20,
        reuseExistingChunk: true,
      },
    },
  },
  
  moduleIds: 'deterministic',
  chunkIds: 'deterministic',
  realContentHash: true,
};

config.experiments = {
  outputModule: true,  // 启用 ESM 输出
  
  // 如果想使用原生 CSS/TS 支持
  // css: true,
  // typescript: true,
  
  // 大型项目推荐启用
  lazyCompilation: {
    entries: false,
    imports: true,
  },
  
  cacheUnaffected: true,
};

const pkg = require('./package.json');

config.cache = {
  type: 'filesystem',
  compression: 'gzip',
  maxAge: 1000 * 60 * 60 * 24 * 7,  // 7天
  readonly: process.env.NODE_ENV === 'production',
  profile: process.env.NODE_ENV === 'development',
  version: `${pkg.version}-v5.107`,
  buildDependencies: {
    config: [__filename],
  },
};

if (process.env.NODE_ENV !== 'production') {
  config.devtool = 'eval-cheap-module-source-map';
  
  config.devServer = {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000,
    hot: true,
    open: true,
    historyApiFallback: true,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
      progress: true,
    },
  };
  
  config.watchOptions = {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000,
  };
}

// webpack.config.ts
import path from 'path';
import { Configuration } from 'webpack';
import pkg from './package.json';

const isDev = process.env.NODE_ENV !== 'production';

const config: Configuration = {
  mode: isDev ? 'development' : 'production',
  
  // === 输入 ===
  entry: {
    main: './src/index.ts',
  },
  
  // === 输出 ===
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isDev ? 'js/[name].js' : 'js/[name].[contenthash:8].js',
    publicPath: '/',
    clean: true,
    module: true,
    environment: {
      arrowFunction: false,
      bigIntLiteral: false,
    },
    ...(isDev ? {} : {
      cssFilename: 'css/[name].[contenthash:8].css',
    }),
  },
  
  // === 模块处理 ===
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.vue'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      vue$: 'vue/dist/vue.runtime.esm-bundler.js',
    },
    conditionNames: ['webpack', isDev ? 'development' : 'production', 'browser'],
  },
  
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{
          loader: 'ts-loader',
          options: { transpileOnly: true },
        }],
        exclude: /node_modules/,
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.less$/i,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: { localIdentName: '[local]_[hash:base64:5]' },
          },
        }, 'less-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        type: 'asset/resource',
        generator: { filename: 'images/[hash][ext][query]' },
      },
    ],
  },
  
  // === 后处理 ===
  optimization: {
    minimize: !isDev,
    usedExports: true,
    sideEffects: true,
    concatenateModules: true,
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxSize: 244000,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
    moduleIds: 'deterministic',
    chunkIds: 'deterministic',
    realContentHash: true,
  },
  
  // === 实验性功能 ===
  experiments: {
    outputModule: true,
    lazyCompilation: {
      entries: false,
      imports: true,
    },
    cacheUnaffected: true,
  },
  
  // === 缓存 ===
  cache: {
    type: 'filesystem',
    compression: 'gzip',
    maxAge: 1000 * 60 * 60 * 24 * 7,
    readonly: !isDev,
    profile: isDev,
    version: `${pkg.version}-v5.107`,
    buildDependencies: {
      config: [__filename],
    },
  },
  
  // === 开发工具 ===
  ...(isDev ? {
    devtool: 'eval-cheap-module-source-map',
    devServer: {
      static: { directory: path.join(__dirname, 'public') },
      port: 3000,
      hot: true,
      open: true,
      historyApiFallback: true,
      client: {
        overlay: { errors: true, warnings: false },
        progress: true,
      },
    },
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 1000,
    },
  } : {}),
  
  // === 性能 ===
  performance: {
    hints: isDev ? false : 'warning',
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  
  // === 统计信息 ===
  stats: isDev ? 'minimal' : 'normal',
  
  // === 配置验证 (v5.106+) ===
  validate: {
    strict: true,
  },
};

export default config;

npm install -g webpack-cli@latest

npx create-webpack-app my-app

yarn create webpack-app my-app

? Select project type:
  ◯ JavaScript
  ◯ TypeScript
  ◯ React
  ◯ Vue
  ◯ Svelte
  ◯ Solid
  ◯ Library

? Select features (Press <space> to select):
  ◯ CSS Pre-processors (Less, Sass, etc.)
  ◯ CSS Modules
  ◯ ESLint
  ◯ Prettier
  ◯ Jest (Testing)
  ◯ Storybook
  ◯ Dev Server with HMR
  ◯ Path Aliases (@/ -> src/)
  ◯ Bundle Analyzer

? Select code splitting strategy:
  ◯ Auto (recommended)
  ◯ Vendor Separate
  ◯ Manual

? Enable persistent caching?
  ◯ Yes (recommended)
  ◯ No

my-app/
├── src/
│   ├── index.ts/js
│   ├── App.tsx/vue/js
│   └── assets/
├── public/
├── webpack.config.ts        # TypeScript 配置（webpack-cli 7 原生支持）
├── tsconfig.json
├── package.json
└── README.md

webpack init

webpack loader init

webpack plugin init

npm create vite@latest my-vite-app -- --template react-ts

npm install -g @vue/cli

vue create my-project

vue ui

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return options
      })
  }
}

vue inspect > output.js

vue inspect --mode production > output.prod.js

npx create-react-app my-app

cd my-app && npm start

npm run eject