模块打包工具是如何工作的？

1. 入口解析 → 2. 依赖图构建 → 3. 转换编译 → 4. 代码生成 → 5. 输出

// webpack.config.js
entry: './src/index.js'

// vite.config.js
build.rollupOptions.input: 'src/index.html'

index.js
  ├── import { add } from './math.js'
  │     └── import { calculator } from './utils.js'
  ├── import React from 'react'  → node_modules
  └── import './styles.css'

function createDependencyGraph(entry) {
  const graph = {}
  
  function visit(filepath) {
    if (graph[filepath]) return  // 已访问
    
    const code = fs.readFileSync(filepath, 'utf-8')
    const deps = parseImports(code)  // 提取 import/require
    
    graph[filepath] = { code, deps }
    deps.forEach(dep => visit(resolve(dep, filepath)))
  }
  
  visit(entry)
  return graph
}

// babel 转译
// .vue SFC 编译
// CSS → JS 模块
// 图片 → URL/Base64

// Webpack 将每个模块包装为函数
__webpack_modules__ = {
  './src/math.js': function(module, exports, __webpack_require__) {
    exports.add = function(a, b) { return a + b }
  },
  './src/index.js': function(module, exports, __webpack_require__) {
    const { add } = __webpack_require__('./src/math.js')
    console.log(add(1, 2))
  }
}

// 运行时
function __webpack_require__(moduleId) {
  var module = { exports: {} }
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__)
  return module.exports
}

// 执行入口
__webpack_require__('./src/index.js')

// 动态 import() 触发代码分割
import('./dashboard.js').then(module => {
  module.render()
})

// Webpack 生成：
// main.js（入口 chunk）
// dashboard.[hash].js（异步 chunk）
// 运行时按需加载 dashboard chunk

// 浏览器直接请求 /src/main.js
// Vite 拦截请求，按需编译单个模块
// 浏览器通过 import 链自动加载依赖

// vite build → Rollup 打包
// 输出 dist/ 目录

const fs = require('fs')
const path = require('path')
const { parse } = require('acorn')

function bundle(entry) {
  const modules = {}
  
  function analyze(filepath) {
    const code = fs.readFileSync(filepath, 'utf-8')
    const ast = parse(code, { sourceType: 'module' })
    const deps = []
    
    ast.body.forEach(node => {
      if (node.type === 'ImportDeclaration') {
        deps.push(node.source.value)
      }
    })
    
    modules[filepath] = { code, deps }
    deps.forEach(dep => {
      const depPath = path.resolve(path.dirname(filepath), dep)
      if (!modules[depPath]) analyze(depPath)
    })
  }
  
  analyze(entry)
  
  // 生成打包代码...
  return generateOutput(modules, entry)
}