Webpack

快速回答

Webpack 是静态模块打包器。它从 entry 出发解析 import/require，经过 loader 把不同资源转换成模块，通过 plugin 参与整个编译生命周期，最终把模块组织为 chunk 并生成 asset。面试不要只说“把所有文件打成一个包”，因为它支持多入口、动态导入、代码分割和运行时代码。

深入解答

核心概念

• Entry：模块图遍历起点。
• Module：Webpack 理解并参与依赖图的资源单元。
• Loader：把源资源转换成 Webpack 可继续处理的模块。
• Plugin：通过 compiler/compilation hooks 参与构建生命周期。
• Chunk：模块按入口、动态导入和优化策略形成的代码块。
• Asset：最终写入输出目录的文件。

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

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
};

配置详解

• mode 打开对应默认优化，entry 建立图的起点。
• contenthash 让内容未变化的产物保留文件名，利于长期缓存。
• clean 清理本次输出目录中的旧资产，不影响源文件。

高频面试追问

Webpack 只能处理 JavaScript 吗？

不是。非 JavaScript 资源通常先经过 loader，或通过 Asset Modules 转成可进入模块图的结果。

Bundle 和 Chunk 一样吗？

Chunk 是构建内部组织单位，asset 是输出文件；一个 chunk 通常生成一个或多个 asset，不能在所有场景下简单画等号。

官方参考：Webpack Concepts。