webpack 核心概念与构建流程

module.exports.pitch = function () {
  if (fs.existsSync(this.resourcePath)) return; // undefined 才继续
  return 'export default null;';
};

三、plugin 与 Tapable

扩展点全部由 Tapable 提供：发布订阅 + 钩子类型约束返回值语义。

要做 IO 用 Async 系，链式改写用 SyncWaterfallHook，可中断用 Bail。

Compiler 进程级，webpack(config) 时创建，持有 options / hooks / watch；Compilation 每轮构建新建，持有 modules / chunks / assets。compiler 的钩子只 apply 一次，想拿模块信息要在 thisCompilation 里再 tap。

const { Compilation, sources } = require('webpack');

module.exports = class ManifestPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('Manifest', (compilation) => {
      compilation.hooks.processAssets.tap(
        { name: 'Manifest', stage: Compilation.PROCESS_ASSETS_STAGE_REPORT },
        (assets) => {
          const map = Object.fromEntries(Object.entries(assets).map(([f, a]) => [f, a.size()]));
          compilation.emitAsset('manifest.json', new sources.RawSource(JSON.stringify(map)));
        }
      );
    });
  }
};

webpack 5 用 processAssets + emitAsset，compilation.assets 在 emit 之后已冻结。

四、完整构建流程

记法：make 收集 module，seal 决定 chunk，emit 生成 asset。

五、module / chunk / bundle / asset

chunk 是构建期概念，bundle 是产物概念，asset 是文件系统概念；一个 chunk 可产出多个 asset。

六、从 stats 读 module 与 chunk 的关系

webpack --profile --json > dist/stats.json

const { chunks, modules } = require('./dist/stats.json');
chunks
  .map((c) => ({ names: c.names, size: c.size, n: c.modules.length }))
  .sort((a, b) => b.size - a.size)
  .slice(0, 5)
  .forEach((c) => console.log(c.names, c.n, 'modules', c.size));
modules                             // 反查：某模块进了哪些 chunk
  .filter((m) => m.name.includes('lodash'))
  .forEach((m) => console.log(m.name, '→', m.chunks));

chunk.modules 与 module.chunks 是双向索引，任选一侧都能定位它为什么在这个文件里；module.reasons[].moduleName 给出引入者。

七、最小可跑配置

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

module.exports = (env, { mode }) => ({
  mode,
  entry: { app: './src/index.tsx' },
  output: { path: path.resolve('dist'), filename: '[name].[contenthash:8].js', clean: true },
  resolve: { extensions: ['.tsx', '.ts', '.js'], alias: { '@': path.resolve('src') } },
  module: {
    rules: [
      { test: /\.tsx?$/, include: path.resolve('src'), use: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  optimization: { splitChunks: { chunks: 'all' }, runtimeChunk: 'single' },
});

慢时可给 ts-loader 加 transpileOnly，类型检查交给 fork-ts-checker。

八、常见误区

1. 以为 loader 按配置数组从左往右执行。normal 从右往左，pitch 从左往右；「先做」的逻辑放右边。
2. 以为一个 chunk 对应一个文件。开 CSS 抽离后一个 chunk 输出 JS + CSS 两个 asset。
3. 以为异步 chunk 的 [name] 会取文件名。默认是数字 id，要用 webpackChunkName 魔法注释。

面试怎么答

Q：loader 和 plugin 的区别？ loader 是文件级转换器，输入输出都是字符串，跑在 buildModule；plugin 通过 apply(compiler) 在钩子介入，能拿 compilation 访问模块图与 chunk。判断依据是需求要不要跨文件信息。

Q：compiler 和 compilation 什么关系？ compiler 代表构建进程，持有配置与 watch 状态；compilation 每轮构建创建一次，持有该轮的 modules、chunks、assets。watch 下只有 compilation 重建。

Q：chunk 和 bundle 的区别？ chunk 是构建期对 module 的分组，splitChunks 操作的就是它，只在内存里；bundle 是 chunk 渲染压缩后落盘的文件。

关联阅读

• 构建工具原理与选型：两代构建模型的差异与选型依据
• webpack 性能优化：缓存、分包、tree shaking 的具体开关
• 前端性能优化体系：产物指标如何落到真实体验