webpack核心概念

1. Manifest

webpack中runtime和manifest主要用于管理所有模块的交互，主要是用于连接模块化应用程序的所有代 码。runtime包含：在模块交互时，连接模块所需的加载和解析逻辑，包括浏览器中已加载模块的连接以及懒加载模块的执行连接。

管理模块交互的流程：

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

2. 模板热替换

HMR（模板热替换）主要用于无需刷新页面，在应用程序中替换，添加或删除模块。主要有以下几种方 式：

（1）保留在完全加载页面时丢失的应用程序状态；

（2）只更新变更内容，节省开发时间；

（3）调整样式更加快速。

3.代码分离（code splitting）

代码分离是将代码分离到不同的bundle中，能够按需加载或者并行加载这些文件。代码分离可以获取更小的bundle,以及控制资源加载优先级，可影响加载时间

三种代码分离方法：

（1）入口起点：使用entry选项自动分离代码；

（2）防止重复：使用commonChunkPlugin去重和分离chunk

（3）动态导入：通过模块的内联函数调用来分离代码。

4.模板(Modules)

在模块化编程中，开发者将程序分解成离散功能块，称之为模块。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

ES2015 import 语句

CommonJS require() 语句

AMD define 和 require 语句

css/sass/less 文件中的 @import 语句。

样式(url(…))或 HTML 文件(

<img src=...>

)中的图片链接(image url)

通过loader可以支持各种语言和预处理器编写模块

支持的类型： coffeeScript,TypeScript,Babel,Sass,Less,Stylus