Webpack 浅析Webpack的几个核心概念

webpack核心概念

1. 入口（Entry）
2. 出口（Output）
3. 加载器（Loader）
4. 插件（Plugin）
5. 模式（Mode）
6. 模块（Module）
7. 依赖图（Dependency Graph）

1 入口

• 打包时，第一个被访问的源码文件。
• 默认为src/index.js（可以配置）。
• webpack通过入口，加载整个项目的依赖。

2 出口

• 打包之后，输出的文件名称。
• 默认为dist/main.js（可以配置）。

3 加载器

• 专门用来处理一类文件（非js）的工具。
  • webpack默认只能识别JS，其余的文件需要借助loader

4 插件

• 实现loader之外的其它功能。
  • plugin是webpack的支柱，用来实现丰富的功能。
• loader和plugin本质上都是npm包。

5 模式

• 用来区分环境的关键字。
  • 不同环境的打包逻辑不通，因此需要区分。
• 三种模式
  1. development（自动优化打包速度，添加一些调试过程中的辅助）
  2. production（自动优化打包结果）
  3. none（运行最原始的打包，不作任何额外处理）

6 模块

• webpack中，模块的概念比较宽泛（一切皆是模块）
  • JS模块
  • 一段css
  • 一个图片…

7 依赖图

常言道，只可意会不可言传，此图可管中以窥豹也