#Webpack 原理与实践

// 模块 ID 到模块工厂函数的映射
const modules = {}
const moduleCache = {}
const chunkPromises = {}

function requireModule(moduleId) {
  const cachedModule = moduleCache[moduleId]
  if (cachedModule) {
    return cachedModule.exports
  }

  const module = { exports: {} }
  moduleCache[moduleId] = module
  modules[moduleId](module)
  return module.exports
}

// 异步 chunk 执行时调用，向模块表注册新模块
window.registerChunk = (newModules) => {
  Object.assign(modules, newModules)
}

function loadChunk(chunkId) {
  if (!chunkPromises[chunkId]) {
    chunkPromises[chunkId] = new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = `${chunkId}.chunk.js`
      script.onload = resolve
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

  return chunkPromises[chunkId]
}

async function loadSettings() {
  // 先加载 settings.chunk.js，等待其中的模块注册完成
  await loadChunk('settings')
  // 再执行已注册的 settings 模块，并返回它的导出值
  return requireModule('./src/settings.js')
}

// 以下代码位于 settings.chunk.js
window.registerChunk({
  './src/settings.js': (module) => {
    module.exports = {
      title: 'Settings',
    }
  },
})

function updatePage() {
  // 重新读取 foo，并更新当前页面
}

// CommonJS 模块
if (module.hot) {
  module.hot.accept('./foo', updatePage)
}

// 严格 ESM 模块
if (import.meta.webpackHot) {
  import.meta.webpackHot.accept('./foo', updatePage)
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

class BuildDonePlugin {
  apply(compiler) {
    compiler.hooks.done.tap('BuildDonePlugin', () => {
      console.log('build done')
    })
  }
}

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
}

module.exports = {
  output: {
    filename: 'static/js/[name].[contenthash:8].js',
    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
    clean: true,
  },
  optimization: {
    // 单独拆出 runtime，缩小其变化对业务包 hash 的影响
    runtimeChunk: 'single',
    splitChunks: {
      // 同步与异步 chunk 一起参与分包
      chunks: 'all',
      // 20KB 以下不单独拆，避免小请求过多
      minSize: 20 * 1024,
      // 限制入口包的请求数
      maxInitialRequests: 6,
      // 限制异步加载的请求数
      maxAsyncRequests: 10,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          // 优先提取第三方依赖
          priority: 10,
        },
        common: {
          // 至少被 2 个 chunk 共享才拆出
          minChunks: 2,
          name: 'common',
          priority: 0,
          // 有可复用 chunk 时直接复用
          reuseExistingChunk: true,
        },
      },
    },
  },
}

const SettingsPage = () => import('./pages/settings')
const ReportPage = () => import('./pages/report')

module.exports = {
  output: {
    // 内容变化时更新文件名
    filename: 'static/js/[name].[contenthash:8].js',
    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'static/media/[name].[contenthash:8][ext]',
  },
  optimization: {
    // 使用稳定的 module id
    moduleIds: 'deterministic',
    // 使用稳定的 chunk id
    chunkIds: 'deterministic',
    // 独立 runtime，减少业务包 hash 变化
    runtimeChunk: 'single',
  },
}

const path = require('path')
const webpack = require('webpack')

module.exports = {
  resolve: {
    // 只尝试项目实际使用的文件后缀
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    // 将源码中的别名解析到固定目录
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    // 对确认没有依赖声明的完整库跳过 parser
    noParse: /jquery|lodash/,
    rules: [
      {
        // 匹配 JS、JSX、TS 和 TSX 文件
        test: /\.[jt]sx?$/,
        // 只让 loader 处理 src 目录
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // 排除 moment 不需要的 locale 资源
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
  ],
}

const path = require('path')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        // 匹配 TS 和 TSX 文件
        test: /\.tsx?$/,
        // 只处理 src 目录
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            // 利用 pitch 阶段先行，将右侧 loader 放到 worker 中执行
            loader: 'thread-loader',
            options: {
              // worker 数量结合 CPU 核数和构建规模调整
              workers: 2,
            },
          },
          {
            // 在 worker 中执行 SWC 转译；只转译，不做类型检查
            loader: 'swc-loader',
            options: {
              // 解析 TS 和 TSX 语法并输出 JavaScript
              jsc: {
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                },
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // 将 TypeScript 类型检查从转译流程中拆开
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        // 在独立进程中读取 tsconfig 执行类型检查
        configFile: path.resolve(__dirname, 'tsconfig.json'),
        // 同时检查语法错误和类型错误
        diagnosticOptions: {
          // 检查类型关系和语义错误
          semantic: true,
          // 检查语法错误
          syntactic: true,
        },
      },
    }),
  ],
}

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    // 开启生产压缩
    minimize: true,
    minimizer: [
      new TerserPlugin({
        // 并行处理压缩任务
        parallel: true,
        terserOptions: {
          // 保持默认压缩轮次，避免额外耗时
          compress: { passes: 1 },
        },
      }),
        // 压缩 CSS
        new CssMinimizerPlugin(),
    ],
  },
}

const path = require('path')

module.exports = {
  cache: {
    // 将缓存持久化到文件系统
    type: 'filesystem',
    // 指定缓存目录
    cacheDirectory: path.resolve(__dirname, '.webpack-cache'),
    buildDependencies: {
      // 配置文件变化时使缓存失效
      config: [__filename],
    },
  },
}

const path = require('path')
const webpack = require('webpack')

module.exports = {
  // 单独构建变化较少的依赖
  entry: {
    vendor: ['react', 'react-dom'],
  },
  output: {
    // 输出 DLL 文件和 manifest
    path: path.resolve(__dirname, 'dist/dll'),
    filename: '[name].dll.js',
    // 将 DLL 暴露为 vendor_<fullhash> 形式的库名
    library: '[name]_[fullhash]',
  },
  plugins: [
    new webpack.DllPlugin({
      // 记录模块名与模块 id 的映射
      path: path.resolve(__dirname, 'dist/dll/[name]-manifest.json'),
      // 与 output.library 使用相同的库名
      name: '[name]_[fullhash]',
    }),
  ],
}

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      // 引用 DLL 构建生成的 manifest
      manifest: require('./dist/dll/vendor-manifest.json'),
    }),
    // 生成 index.html，作为主 bundle 和 DLL 的注入目标
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({
      // 将 DLL 文件注入 HTML，并置于主 bundle 前
      filepath: path.resolve(__dirname, 'dist/dll/vendor.dll.js'),
    }),
  ],
}

const { ModuleFederationPlugin } = require('webpack').container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // remote 的名称
      name: 'remoteApp',
      // host 加载的入口文件
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: {
        // 避免 remote 和 host 各自加载一份 React
        react: {
          singleton: true,
          requiredVersion: '^18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.2.0',
        },
      },
    }),
  ],
}

const { ModuleFederationPlugin } = require('webpack').container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        // 指向 remoteEntry，运行时据此查找远程模块
        remoteApp: 'remoteApp@https://cdn.example.com/remoteEntry.js',
      },
      shared: {
        // 与 remote 共享 React 单例
        react: {
          singleton: true,
          requiredVersion: '^18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.2.0',
        },
      },
    }),
  ],
}