webpack是什么

总的来说，webpack能将各种浏览器无法识别的文件，转换成浏览器环境可以识别的文件（html,js,css）。

这个转换过程称为构建。

webpack能操作的文件必须是模块化项目中的文件，webpack将所有文件类型识别为‘模块’。

对构建的参数（输入，输出，转换方法）进行说明的文件，是webpack的配置文件webpack.config.js。

配置文件中关键的几个参数有：

1. 入口entry：从何处开始识别项目，以进行后续动作。
2. 出口output：将构建出的文件，以什么名字，放到什么位置。
3. loader：webpack只能识别js文件，loader可以帮助webpack识别出各种文件，并转换成‘模块’。
4. plugin：插件可以扩展webpack的功能。

以下是《深入浅出webpack》中的系统描述。

Webpack 有以下几个核心概念。

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

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。