核心概念
# 核心概念
# Webpack 五个核心概念
# Entry
入口（Entry）是打包时，第一个被访问的源码文件。默认是 src/index.js （可以通过配置文件指定）。
Webpack 通过入口，加载整个项目的依赖。
（Webpack 入口）
# Output
出口（Output）是打包后，输出的文件名称，默认是 dist/main.js（可以通过配置文件指定）。
如下图，出口是 dist/main.js：
（Webpack 出口）
# Loader
加载器（Loader）是专门用来处理那些非 JavaScript 文件的工具（Webpack 默认只能识别 JavaScript），将这些资源翻译成 Webpack 能识别的资源。
Loader 的命名方式一般为 xxx-loader（css-loader | html-loader | file-loader），它们都是以 -loader 为后缀的 npm 包，常用加载器 (opens new window)。
Loader 加载的基本逻辑：
（Webpack loader 加载的基本逻辑）
打包时，我们也可以将不同类型的文件，单独打包：
（Webpack loader 单独打包其它文件的逻辑）
# Plugins
插件（Plugins）用于实现 Loader 之外的其他功能，包括但不限于打包优化和压缩，重新定义环境中的变量等。Plugin 是 Webpack 的支柱，用来实现丰富的功能。
Plugins 的命名方式一般为 xxx-webpack-plugin（html-webpack-plugin），它们都是以 -webpack-plugin 为后缀的 npm 包，常用插件 (opens new window)。
# Mode
模式（Mode）是用来区分环境的关键字，不同环境的打包逻辑不同，因此需要区分。
Mode 有三种固定的写法（名称固定，不能改）：
- development（开发环境：自动优化打包速度，添加一些调试过程中的辅助）
- production（生产环境：自动优化打包结果）
- none（运行最原始的打包，不做任何额外处理）
通过 process.env.NODE_ENV 可以获得当前的 Mode。
# module chunk bundle 的区别
- module：各个源码文件，Webpack 中一切皆模块。
- chunk：多模块合并成的，如 entry、import() 异步加载的时候也生成一个 chunk、splitChunk 拆分代码块的时候定义 chunk。
- bundle：最终的输出文件，由 chunk 构建分析完后输出。
（module chunk bundle）
（完）