webpack学习笔记

概念

webpack是前端资源打包工具。流程：从入口开始，构造依赖图，将项目中所需要的每一个模块合并成一个或者多个bundles，每个bundle都是静态资源，用于展示内容。

入口（entry）

入口指的是webpack会把哪个模块作为构建依赖图的开始，进入入口文件后，webpack会寻找哪些文件（模块）是跟入口文件直接或者间接依赖的。

输出（output）

该配置决定了webpack在哪个文件夹、以什么文件名去输出它创建的bundles。

loader

webpack只能识别js跟json，所以想要让它认识别的文件，就需要loader作为翻译官。

plugin

打包优化，注入环境变量，资源管理等功能。plugin本质是一个具有apply方法的对象， apply方法会被compiler调用

模块解析

webpack可以解析绝对路径、相对路径、模块路径。

模块热更新（HMR）

模块热更新指的是在应用程序运行的过程中，增删改模块而不重新加载整个页面。

热更新步骤

应用程序要求HMR runtime检查更新
HMR异步下载更新，然后通知应用程序
应用程序要求HMR runtime更新
HMR同步更新