简单的webpack使用

Webpack简介

---

Webpack是一个打包模块化的 JavaScript 的工具, webpack里一切文件皆模块, 通过 Loader 转换成文件, 通过Plugin注入钩子, 最后输出有多个模块组合成的文件, webpack专注于构建模块化项目。

基本概念

- Entry:  入口, webpack 执行构建的第一步将从entry开始
- module: 模块, 在webpack里一切皆模块, 一个模块对应一个文件, webpack会从配置的entry开始递归找出所有依赖的模块。
- Chunk:  代码块, 一个Chrunk有多个模块组合而成,用于代码合并与分割.
- Loader: 模块转换器,用于将模块的原内容按照需求转换成新内容。
- Plugin: 扩展插件,在webpack构建流程中的特定时机会广播对应事件,插件可以监听这些事件的发生 ,在特定的时机做对应的事情.

流程概括

webpack的运行流程是 一 个串行的过程,从启动到结束会依次执行以下流程。

我们把以上流程分为三大块

初始化	启动构建,读取与合并配置参数,加载 Plugin ,实例化 Compiler
初始化参数	从配置文件和 Shell 语句中读取与合并参数,得出最终的参数 .在这个过程 中还会 执行配置文件中的插件实例化语句 new Plugin()
实例化 Compiler	用上 一步 得到的参数初始化 Compiler 实例, Compiler 负 责文件监听和启动编译 。在 Compiler实例中包含了完整的 Webpack 配置,全局只有 一 个 Compiler 实例
加载插件	依次调用插件的 apply 方法,让插件可以监听后续的所有事件节 点.同 时向插件传入 compiler实例的引用,以方便插件通过 compiler 调用 Webpack 提供的 API
environment	开始应用 Node.js 风格的文件系统到 compiler 对象,以方便后续的文件 寻找和读取
entry-option	读取配置的 Entrys ,为每个 Entry 实例化 一 个对应的 EntryPlugin ,为 后面该 Entry 的递归解析工作做准备
after-plugins	调用完所有内置的和配置的插件的 apply 方法
after-resolvers	根据配置初始化 resolver, resolver 负责在文件系统中寻找指定路径的文件

编译	从 Entry 发出,针对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该 Module 依赖的 Module ,递归地进行编译处理 。
run	启动 一 次新的编译
watch-run	和 run 类似,区别在于它是在监听模式下启动编译,在这个事件中可以获取是哪些文件发生了变化从而导致重新启动 一 次新的编译
compile	该事件是为了告诉插件 一 次新的编译将要启动,同时会给插件带上 compiler 对象
compilation	当 Webpack 以开发模式运行时,每当检测到文件的变化,便有 一 次新的 Compilation 被创建 。一 个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等 。 Compilation对象也提供了很多事件回调给插件进行扩展
make	一 个新的 Compilation 创建 完毕,即将从 Entry 开始 读取文件,根据文件的类型和配置的 Loader对文件进行编译,编译完后再找出该文件依赖的文件,递归地编译和解析
after-compile	一 次 Compilation 执行 完成
invalid	当遇到文件不存在、文件编译错误等异常时会触发该事件,该事件不会导致 Webpack 退出

输出	将编译后的 Module 组合成 Chunk ,将 Chunk 转换成文件,输出到文件系统中
should-emit	所有需要输出的文件己经生成,询问插件有哪 些文件需要输出 , 有哪些不需要输出
emit	确定好要输出哪些文件后,执行文件输出,可以在这里获取和修改输出的内容
after-emit	文件输出完毕
done	成功完成 一 次完整的编译和输出流程
faild	如果在编译和输出的流程中遇到异常,导致 Webpack 退出, 就会直接跳转到本步骤,插件可以在本事件中获取具体的错误原因

如果只执行一次构建,则以上阶段将会按照顺序各执行一次, 但在开启监昕模式下构建如下图所示: