webpack是什么？概念入门篇

Webpack

概念

现代js应用程序的静态模块打包器（module bundler），递归地构建一个依赖关系图，包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

1. 入口：指示webpack应该使用哪个模块作为构建其内部依赖图的开始。Entry属性配置。
2. 出口：告诉webpack在哪里输出他所创建的bundles，以及如何命名这些文件。Output属性配置。
3. Loader：让webpack能够处理那些非js文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
   本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。Module=》rules=》test=》use
4. 插件：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。Plugins属性配置。
5. 模式：通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。Mode属性配置。

一、 入口起点 entry points

entry: string|Array<string>

单个入口（简写）entry: {main: string|Array<string>}
对象语法 entry: {[entryChunkName: string]: string|Array<string>}

二、 输出 output

只指定一个输出配置
用法：最低要求是将output属性设置为一个对象，包括两点：1.filename 2.path
多个入口起点需使用占位符来确保每个文件有唯一的名称。

三、 模式

Mode选项，设置为development、production，将会设置process.env.NODE_ENV的值，启用不同插件。

四、 Loader

在import或“加载”模块时预处理文件

1. 首先安装相应的loader
2. 指示webpack对文件使用对应loader。Module=》rules=》rules=》test=》use

如何使用loader：

1. 配置：在webpack.config.js文件中指定loader
2. 内联：在每个import语句中显示指定loader
3. CLI：在shell命令中指定它们

五、 插件 plugins

webpack 插件是一个具有== apply 属性==的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

六、 配置 configuration

Webpack的配置文件是导出的一个对象的js文件。Webpack的配置是标准的node.js commonJS模块，可以做以下事情：

1. 通过 require(…) 导入其他文件
2. 通过 require(…) 使用 npm 的工具函数
3. 使用 JavaScript 控制流表达式，例如 ?: 操作符
4. 对常用值使用常量或变量
5. 编写并执行函数来生成部分配置

避免以下做法：

1. 在使用 webpack 命令行接口(CLI)（应该编写自己的命令行接口(CLI)，或使用 --env）时，访问命令行接口(CLI)参数
2. 导出不确定的值（调用 webpack 两次应该产生同样的输出文件）
3. 编写很长的配置（应该将配置拆分为多个文件）

七、 模块modules

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

1. ES2015 import 语句
2. CommonJS require() 语句
3. AMD define 和 require 语句
4. css/sass/less 文件中的 @import 语句。
5. 样式(url(…))或 HTML 文件(<img src=...>)中的图片链接(image url)

八、 模块解析 module resolution

Resolver是一个库，用于帮助找到模块的绝对路径。

打包模块时使用enhanced-resolve来解析文件路径，三种文件路径：绝对路径、相对路径、模块路径

ResolveLoader配置选项用来为Loader提供独立的解析规则。

缓存：每个文件系统访问都被缓存，在观察模式下只有修改文件会从缓存中摘出。如果关闭观察模式，在每次编译前清理缓存。

九、 依赖图 dependency graph

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

十、 Manifest

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

当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 “Manifest”，当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。

通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。

十一、 构建目标 targets

因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)。

设置target属性‘node’或‘web’。

多个target可以通过打包两份分离的配置来创建同构的库

十二、 模块热替换 hot module replacement

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

1. 保留在完全重新加载页面时丢失的应用程序状态。
2. 只更新变更内容，以节省宝贵的开发时间。
3. 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。