Webpack相关

一、概念

1、基本组成：entry、output、loader、plugins

entry：

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

入口可以有一个 也可以有多个，如果多个入口的话 会分别创建依赖图，相互独立、完全分离。可以通过CommonsChunkPlugin插件 来共享通用的chunk，复用代码和模块。

output：

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

只有一个输出（即使可以存在多个入口起点，但只指定一个输出配置。）

如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

loader：

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

三种使用方式：webpack中配置；@import引入；CLI使用；

解析：loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析。

plugins：

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。常用的插件有：HtmlWebpackPlugin、HappyPack、MiniCssExtractPlugin等。

（梳理一下 常用的插件）

模式：

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。（会有怎样不同的优化？？？）

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

二、打包原理

1、概念：模块解析

使用enhanced-resolve，webpack 能够解析三种文件路径：绝对路径、相对路径、模块路径。

2、流程

（原文：https://juejin.im/entry/5b0e3eba5188251534379615）

1）初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。

2）编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。

3）输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

如果只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为如下：

流程图

3、输出文件

输出后文件bundle.js， (function (modules) { __webpack_require__ ...})([modules1，modules2，modules3...])

(function(modules) {

  // 模拟 require 语句

  function __webpack_require__() {

  }

  // 执行存放所有模块数组中的第0个模块

  __webpack_require__(0);

})([/*存放所有模块的数组*/])