Webpack 理解 input output 概念

一、介绍

如果还没用过 Webpack 请先阅读 Webpack & 基础入门 再回头看本文。

Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。

二、Input

• modules.rules 对接受过来的文件交给 loader 处理。
• resolve.extensions / resolve.alias 对接受过来的文件进行后缀识别、别名识别。
• …

这些配置都是针对“输入”来作为切入点，它们有个抽象名词叫 Input Management 即输入管理。

三、Output

• entry 定义 Webpack 编译入口。
• output 将输出的产物放到指定地方。
• optimization 将输出的产物文件进行切分、缓存。
• plugins 将输出的产物源码进行细化的操作。
• …

这些配置都是针对“输出”来作为切入点，它们有个抽象名词叫Output Management 即输出管理。

---

完！