Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler），它会分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什么要学习 Webpack ？

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉 webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

一、什么是 Webpack ？

• 本质上是一种前端资源编译、打包工具

二、使用 Webpack

1. 安装
2. 编辑配置文件
3. 执行编译命令

1. 核心流程——极度简化版

1. 入口处理：从entry文件开始，启动编译流程
2. 依赖解析：从entry文件开始，根据requireorimport等语句找到依赖资源
3. 资源解析：根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
4. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

2.模块化 + 一致性

1. 多个文件资源合并成一个，减少 http 请求数
2. 支持模块化开发
3. 支持高级 JS 特性
4. 支持TypeScript、CoffeeScript 方言
5. 统一图片、CSS、字体等其他资源的处理模型

Webpack 配置

• 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项。 输入：entry、context; 模块解析：resolve、externals; 模块转译：module; 后处理：optimization、mode、target。
• 工具类：主流程之外，提供更多工程化能力的配置项。 开发效率类：watch、devtool、devServer； 性能优化类：cache、performance； 日志类：stats、infrastructureLogging； 其它：amd、ball等。

三、核心概念

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。