AAsteriadne

website

Webpack Docs

所属分类：开发者在线工具箱

webpack 打包工具的官方概念、指南与模块联邦文档。

代码文档

Webpack Docs 是 webpack 模块打包工具的官方文档站，按概念、配置、指南、加载器和插件等分类组织内容。概念部分解释 webpack 如何从入口文件构建依赖图并生成输出文件，模块联邦部分则讲解多个独立构建如何在运行时共享模块，适合需要理解打包原理或拆分大型前端应用的开发者。

Webpack Docs：webpack 的核心概念、模块联邦与指南目录

发布于 2026年10月18日更新于 2026年10月30日

文档结构与版本选择

顶部导航包括 API、Concepts、Configuration、Guides、Loaders、Migrate 和 Plugins。文档页面可以在 webpack 5 与 webpack 4 之间切换，默认显示 webpack 5 的内容。

左侧目录的 Concepts 下列出 Entry、Output、Loaders、Plugins、Mode、Browser Compatibility 和 Environment 等基础主题，同级还有 Module Federation、Hot Module Replacement 等条目。Guides 分类则按任务组织教程，包括 Getting Started、Asset Management、Code Splitting、Caching、Tree Shaking、Web Workers 和 TypeScript 等。

概念：从入口到输出

Concepts 页面说明，webpack 是面向现代 JavaScript 应用的静态模块打包器。它从一个或多个入口模块开始，建立依赖图，再把项目需要的所有模块合并为一个或多个静态资源包。页面写明，自 webpack 4.0.0 起，项目不再必须提供配置文件，但仍可以通过配置进行细致调整。

页面给出的入口示例是在配置文件中写入 entry: "./path/to/my/entry/file.js"。如果不提供配置，入口默认解析为 ./src 目录中的 index.js 文件。页面列出的核心概念包括 Entry、Output、Loaders、Plugins、Mode 和 Browser Compatibility，并链接到各自更详细的说明。

webpack 文档 Concepts 页面截图，左侧为 webpack 5 版本的目录，Concepts 下列出 Entry、Output、Loaders、Plugins 等条目，正文开头为“At its core, webpack is a static module bundler”

模块联邦：多个独立构建共享代码

Module Federation 页面的开头写道，多个独立构建应当组成一个应用，这些构建像容器一样相互暴露和使用代码。页面提到，这种思路常被称为微前端，但不限于微前端。

页面区分了本地模块与远程模块。本地模块属于同一次构建；远程模块不在当前构建中，而是在运行时从远程容器加载。加载远程模块是异步操作，通常借助 import() 等分块加载机制完成。页面的低层概念部分介绍了 ContainerPlugin、ContainerReferencePlugin 等构建块，ModuleFederationPlugin 则被归为高层构建块。

页面还包括共享作用域（share scopes）、按页面拆分独立构建、把组件库作为容器、动态远程容器等使用场景。故障排查（Troubleshooting）部分列出了 “Shared module is not available for eager consumption”、“Module ... does not exist in container” 等常见报错及对应说明。

webpack 模块联邦文档页，标题为 Module Federation，左侧目录展开了 Motivation、Low-level concepts 等小节，正文介绍本地模块与远程模块

指南：循序渐进的任务教程

Guides 页面说明，指南内容由浅入深，大多数指南都是进入完整文档前的起点。页面提醒，指南中运行 webpack 得到的输出可能与新版本略有不同，只要打包结果相似且能正常运行，就通常不构成问题；如果新版本导致示例失效，可以在项目仓库中提交问题。