webpack是什么

webpack是一个模块打包器。webpack处理带有依赖关系的模块，生成一系列表示这些模块的静态资源!=

1. entry 入口起点只是webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出那些模块和库是入口起点依赖的

2. output 出口属性告诉我webpack在哪里输出它所创建的bundles,以及如何命名这些文件，默认值。./dist 说白了就是告诉通过webpack生成的静态资源放在哪里，什么名字

3. loader 让webpack能够去处理那些非JavaScript文件。说白了js有自己的模块系统，但是css或者其他的静态资源没有模块系统，loader的作用就是将这些文件装成webpack能处理的模块最终生成bundles

4. 插件（plugins）

   loader被用于转换某些类型的模块，而插件则可以拥有执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

5. 模块（chunk) webpack模块

​ webpack 模块能够以各种方式表达他们的依赖关系 ,说白了就是他支持es commonJS AMD CSS less 等等模块

​ 6.模块解析

​ 7.依赖图（dependency graph）

​ 任何时候，一个文件依赖于另一个文件，webpack就把此视为文件之间有依赖关系。这使得webpack可以接收非代码资源，并且可以把它们作为依赖提供给你的应用程序，

​ webpack从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序，从这些入口起点开始，webpack递归的构建一个依赖图，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的bundle 通常只有一个，

​ 8.manifest

​ 在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型:

• 你或你的团队编写的源码 （自己写的代码）

• 自己写的代码依赖的第三方的包library或者vendor代码

• webpack的runtime和manifest ,管理所有模块的交互

  在浏览器运行时，webpack用来连接模块化的应用程序的所有代码及产生的数据：runtime代码和manifest数据。

  runtime:在模块交互时，连接模块所需的加载和解析逻辑，包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

  manifest:一旦应用程序跑起来，webpack开始执行，编译器（compiler）开始执行的时候，形如index.html 一些bundle和各种资源加载到浏览器中，这个时候/src目录结构已经不复存在。、

​ 当编译器开始执行、解析和映射应用程序时，他会保留所有模块的详细要点。这个数据集合称为manifest ,当完成打包并发送到浏览器时，会在运行时通过Manifest来解析和加载模块。无论你选择哪种模块语法，那些import或require语句现在都已经转换为webpack_require方法，此方法指向模块标识符(module identifer)。通过使用manifest中的数据，runtime将能够查询模块标识符，检索出背后对应的模块

9. 构建目标（targets)

   用于指定部署在不同环境的平台上，所以webpack提供了构建目标
   

   10 模块热替换（hot module replacement）

​ 模块热替换（HMR-hot module replacement）功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式：

• 保留在完全重新加载页面时丢失的应用程序状态

• 只更新变更内容，以节省宝贵的开发时间

• 调整样式更加快速，几乎相当于在浏览器调试器中更改样式

  HMR原理：

  1.应用程序代码要求HMR runtime检查更新

  2. HMR runtime 下载更新，然后通知应用程序代码
  3. 应用程序代码要求HMR runtime应用更新
  4. HMR runtime应用更新