深度解析：Webpack 与 Vite 的终极对决及现代构建工具选型指南

// Loader：文件转换器（单个文件 → 单个文件）
// 链式执行，从右到左（从下到上）
module.exports = function(source) {
  // source 是文件内容字符串
  const result = transform(source);
  return result;
};

// Plugin：构建流程的钩子（介入任意阶段）
class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      console.log('即将输出文件:', Object.keys(compilation.assets));
      callback();
    });
  }
}

传统 Webpack：
  源码 → [打包所有模块] → Bundle.js → 启动服务器 → 浏览器加载
  ⚠️ 项目越大启动越慢（几十秒甚至几分钟）

Vite：
  启动服务器（瞬间）→ 浏览器请求 index.html
  → 浏览器发现 <script type="module" src="/src/main.ts">
  → 请求 main.ts → Vite 按需编译 main.ts 并返回
  → 浏览器发现 import App from './App.tsx'
  → 请求 App.tsx → Vite 按需编译 App.tsx 并返回
  → ... 只编译浏览器实际请求的模块

依赖预构建（esbuild）：
  node_modules 中的依赖在首次启动时用 esbuild 预构建为 ESM 格式
  缓存到 node_modules/.vite → 后续请求直接返回缓存

// 1. 入口分割：多页应用多入口
// 2. 动态导入：import() 自动创建异步 Chunk
const module = await import('./heavy-module');

// 3. SplitChunks：提取公共依赖
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: { test: /node_modules/, name: 'vendor', chunks: 'all' },
      common: { minChunks: 2, name: 'common', chunks: 'all' },
    },
  },
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    // Rollup 兼容钩子
    resolveId(source) {
      if (source === 'virtual:my-module') return source;
    },
    load(id) {
      if (id === 'virtual:my-module') {
        return `export const msg = "Hello from virtual module"`;
      }
    },
    // Vite 独有钩子
    configureServer(server) {
      server.middlewares.use('/api/test', (req, res) => {
        res.end(JSON.stringify({ ok: true }));
      });
    },
    transformIndexHtml(html) {
      return html.replace('</head>', '<script>console.log("injected")</script></head>');
    },
  };
}