枫祺玥的小客栈

webpack 作为最流行的打包工具，不好好研究一下真的就是有些落伍啦。

一句话描述

webpack是一个打包模块化js的工具，可以通过loader转换文件，通过plugin扩展功能。

webpack 做了什么

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

核心原理

• 一切皆模块：在webpack中，css,html.js，静态资源文件等都可以视作模块；便于管理，利于重复利用；
• 按需加载：进行代码分割，实现按需加载。

核心概念

最核心概念有如下 6 条

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