Webpack模型

# 概述

基于NodeJS的构建工具曾经百花盛开，有纯指令的npm script，依靠NodeJS的grunt、gulp、bower等等，现在基本上都统一到Webpack。

Webpack是简单又强大的构建工具，它基于流水线的事件系统，方便很多插件加入并让webpack更加强大，还提供接口给众多Loaders，方便处理不同的文件，它自带了热更新功能，对于前端工程师来说太友好了，非常利于设计调试页面。

大概总结一下Webpack可以做的事情：

1. 代码转换
2. 文件压缩
3. 文件分割
4. 模块合并
5. 热更新
6. 代码校验
7. 自动发布

那么Webpack最基本作用是什么呢？

> 就是从入口文件遍历所有相关文件（模块）并把它们合并到一起。这是所有构建工具的基本功能，但是Webpack不仅做得很好，还可以扩展很多功能。

## 运行模型

Webpack的运行过程大致可以分为三个阶段：

### 1. 初始化

读取与合并来自配置文件或指令参数，加载插件，实例化Webpack核心对象Compiler。

### 2. 编译

从配置文件的Entry开始，遍历所有引入的文件（又叫模块），并依次使用匹配的loader去转译内容，社区有很多loader，比如vue-loader，可以把vue格式的文件里的template转译成render函数。

### 3. 输出

遍历并转译完所有文件后，会把它们组合成chunk，再输出到输出目录中。

> webpack还会在运行过程中广播一些事件，并执行绑定相应事件的插件

### 监听模型下

上述的三个流程会变成：

![webpack-watching](https://user-images.githubusercontent.com/8131019/46598499-e5356180-cb16-11e8-863c-33692c9d5057.png)

## 事件模型

Webpack和NodeJS的EventEmmiter一样，可以注册事件，并在时机成熟的时候触发事件。

注册事件一般是在插件（Plugin）中发生的。

下面的事件是从《深入浅出 Webpack》（基于Webpack@3.8.1）中收集来的：

### 1. 初始化阶段

事件名 | 解释
-- | --
初始化参数 | 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。 这个过程中还会执行配置文件中的插件实例化语句 new Plugin()。
实例化 Compiler | 用上一步得到的参数初始化 Compiler 实例，Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置，全局只有一个 Compiler 实例。
加载插件 | 依次调用插件的 apply 方法，让插件可以监听后续的所有事件节点。同时给插件传入 compiler 实例的引用，以方便插件通过 compiler 调用 Webpack 提供的 API。
environment | 开始应用 Node.js 风格的文件系统到 compiler 对象，以方便后续的文件寻找和读取。
entry-option | 读取配置的 Entrys，为每个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工作做准备。
after-plugins | 调用完所有内置的和配置的插件的 apply 方法。
after-resolvers | 根据配置初始化完 resolver，resolver 负责在文件系统中寻找指定路径的文件。

### 2. 编译阶段


事件名 | 解释
-- | --
run | 启动一次新的编译。
watch-run | 和 run 类似，区别在于它是在监听模式下启动的编译，在这个事件中可以获取到是哪些文件发生了变化导致重新启动一次新的编译。
compile | 该事件是为了告诉插件一次新的编译将要启动，同时会给插件带上 compiler 对象。
compilation | 当 Webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被创建。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了很多事件回调供插件做扩展。
make | 一个新的 Compilation 创建完毕，即将从 Entry 开始读取文件，根据文件类型和配置的 Loader 对文件进行编译，编译完后再找出该文件依赖的文件，递归的编译和解析。
after-compile | 一次 Compilation 执行完成。
invalid | 当遇到文件不存在、文件编译错误等异常时会触发该事件，该事件不会导致 Webpack 退出。
build-module | 使用对应的 Loader 去转换一个模块。
normal-module-loader | 在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析。
program | 从配置的入口模块开始，分析其 AST，当遇到 require 等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。
seal | 所有模块及其依赖的模块都通过 Loader 转换完成后，根据依赖关系开始生成 Chunk。

### 3. 输出阶段

事件名 | 解释
-- | --
should-emit | 所有需要输出的文件已经生成好，询问插件哪些文件需要输出，哪些不需要。
emit | 确定好要输出哪些文件后，执行文件输出，可以在这里获取和修改输出内容。
after-emit | 文件输出完毕。
done | 成功完成一次完成的编译和输出流程。
failed | 如果在编译和输出流程中遇到异常导致 Webpack 退出时，就会直接跳转到本步骤，插件可以在本事件中获取到具体的错误原因。

## 分析输出文件

### 1. JS文件

输出文件会把一个entry关联的所有模块都放到一起，并屏蔽掉**模块化**的语句——比如ES6的import和export、AMD的define和require、CommonJS的exports和require——并统一为`__wabpack_require__`，如下（基于webpack@4.20.2）：

```JavaScript
function __webpack_require__(moduleId) {

  // Check if module is in cache
  if(installedModules[moduleId]) {
    return installedModules[moduleId].exports;
  }
  // Create a new module (and put it into the cache)
  var module = installedModules[moduleId] = {
    i: moduleId,
    l: false,
    exports: {}
  };

  // Execute the module function
  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

  // Flag the module as loaded
  module.l = true;

  // Return the exports of the module
  return module.exports;
}
```

如果有需要异步加载的模块（比如使用API：`import(__module__).then(__module__ => {})`），输出文件还会多一个借助**JSONP模式**和**Promise对象**加载文件的函数：

```JavaScript
__webpack_require__.e = function requireEnsure(chunkId) {
  var promises = [];


  // JSONP chunk loading for javascript

  var installedChunkData = installedChunks[chunkId];
  if(installedChunkData !== 0) { // 0 means "already installed".

    // a Promise means "currently loading".
    if(installedChunkData) {
      promises.push(installedChunkData[2]);
    } else {
      // setup Promise in chunk cache
      var promise = new Promise(function(resolve, reject) {
        installedChunkData = installedChunks[chunkId] = [resolve, reject];
      });
      promises.push(installedChunkData[2] = promise);

      // start chunk loading
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      var onScriptComplete;

      script.charset = 'utf-8';
      script.timeout = 120;
      if (__webpack_require__.nc) {
        script.setAttribute("nonce", __webpack_require__.nc);
      }
      script.src = jsonpScriptSrc(chunkId);

      onScriptComplete = function (event) {
        // avoid mem leaks in IE.
        script.onerror = script.onload = null;
        clearTimeout(timeout);
        var chunk = installedChunks[chunkId];
        if(chunk !== 0) {
          if(chunk) {
            var errorType = event && (event.type === 'load' ? 'missing' : event.type);
            var realSrc = event && event.target && event.target.src;
            var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
            error.type = errorType;
            error.request = realSrc;
            chunk[1](error);
          }
          installedChunks[chunkId] = undefined;
        }
      };
      var timeout = setTimeout(function(){
        onScriptComplete({ type: 'timeout', target: script });
      }, 120000);
      script.onerror = script.onload = onScriptComplete;
      head.appendChild(script);
    }
  }
  return Promise.all(promises);
};
```

关键的函数有：
1. `__webpack_require__.e`，通过Promise使用JSONP发起异步模块请求（JSONP其实就是新增一个script标签并模拟http get请求），然后把Promise的resolve和reject传递给JSONP里的函数（也就是`webpackJsonpCallback`）等待执行，另外script标签的onload和onerror事件会设置一些超时或异常处理
2. `webpackJsonpCallback`，把异步加载的模块放入`installedModules`里，并在`installedChunks`里修改相关信息防止重复加载，最后执行Promises的resolve
3. `__webpack_require__.t`，主要是把前面加载的模块传递给Promise的下一个onResolve回调

> script的load事件回调会在script本体执行完了之后才会执行

```JavaScript
__webpack_require__.e = function requireEnsure(chunkId) {
  var promises = [];
  // JSONP chunk loading for javascript
  var installedChunkData = installedChunks[chunkId];
  if (installedChunkData !== 0) { // 0 means "already installed".
    // a Promise means "currently loading".
    if (installedChunkData) {
      promises.push(installedChunkData[2]);
    } else {
      // setup Promise in chunk cache
      var promise = new Promise(function (resolve, reject) {
        installedChunkData = installedChunks[chunkId] = [resolve, reject];
      });
      promises.push(installedChunkData[2] = promise);
      /******/
      // start chunk loading
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      var onScriptComplete;
      script.charset = 'utf-8';
      script.timeout = 120;
      if (__webpack_require__.nc) {
        script.setAttribute("nonce", __webpack_require__.nc);
      }
      script.src = jsonpScriptSrc(chunkId);
      onScriptComplete = function (event) {
        // avoid mem leaks in IE.
        script.onerror = script.onload = null;
        clearTimeout(timeout);
        var chunk = installedChunks[chunkId];
        if (chunk !== 0) {
          if (chunk) {
            var errorType = event && (event.type === 'load' ? 'missing' : event.type);
            var realSrc = event && event.target && event.target.src;
            var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
            error.type = errorType;
            error.request = realSrc;
            chunk[1](error);
          }
          installedChunks[chunkId] = undefined;
        }
      };
      var timeout = setTimeout(function () {
        onScriptComplete({ type: 'timeout', target: script });
      }, 120000);
      script.onerror = script.onload = onScriptComplete;
      head.appendChild(script);
    }
  }
  return Promise.all(promises);
};

function webpackJsonpCallback(data) {
  var chunkIds = data[0];
  var moreModules = data[1];


  // add "moreModules" to the modules object,
  // then flag all "chunkIds" as loaded and fire callback
  var moduleId, chunkId, i = 0, resolves = [];
  for(;i < chunkIds.length; i++) {
    chunkId = chunkIds[i];
    if(installedChunks[chunkId]) {
      resolves.push(installedChunks[chunkId][0]);
    }
    installedChunks[chunkId] = 0;
  }
  for(moduleId in moreModules) {
    if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
      modules[moduleId] = moreModules[moduleId];
    }
  }
  if(parentJsonpFunction) parentJsonpFunction(data);

  while(resolves.length) {
    resolves.shift()();
  }

};
```

**总结一下：**

Webpack会把一个entry遍历到的所有JS文件（模块）封装成数组并传进一个IIFE（立即执行函数）中。如果我们使用了webpack提供的api——`import()`来加载异步模块的话，输出文件还会多两个用以加载异步模块的方法。

### 2. 非JS文件

#### 比如css文件

一般来说，css会被提取成字符串，并在打包的文件里使用JS动态生成<style>标签并插入到html中。

但是我们可以把css这部分字符串提取出来，打包成另外一个文件，通用的做法是通过extract-text-webpack-plugin插件。

#### 比如图片文件

通过webpack我们可以把图片内联模式（base64）写入打包文件里，也可以正常打包到输出目录。

借助url-loader，使用方式如下：

```JavaScript
loaders: [
  {
    test: /\.(png|jpg)$/,
    loader: 'url-loader?limit=[length]&name=images/[hash:8].[name].[ext]'
  }
]
```

解释一下上面的意思，定义的[length]表示小于[length]的图片将会使用base64写入打包文件，大于等于[length]的图片会正常打包到输出目录：images里，文件的格式是8位hash加上名字加上扩展名。

注意点：

1. 如果是在JS（包括React）里面通过字符串形式引入的图片，需要使用模块化的方式，如下：

```JavaScript
var imgUrl = require('./images/bg.jpg'), // 模块化的方式
    imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;

render() {
    return (<img src={require('./images/bg.jpg')} />);
}
```

2. 如果是在HTML中引入的图片，也需要特殊处理：引用一个插件—— html-withimg-loder，在entry文件使用模块化方式，如下：

```JavaScript
import '../index.html';
```

这样就可以把HTML文件中的图片打包了。

## 热替换原理

需要webpack-dev-server的支持，并开启热替换功能——`hot: true`。

### 1. 实现的逻辑：

1. 监听文件：监听文件更新，重新编译打包模块，并保存到内存中，并通知webpack-dev-server
2. 通知更新：webpack-dev-server通过websocket通知浏览器校验模块是否应该热替换
3. 热替换：HotModuleReplacement.runtime是浏览器执行热替换的关键，它会异步拉取新的模块替换老的模块并执行相关的热替换操作（这部分需要开发者实现）

> 如果热替换失败，会回退到热刷新操作

### 2. Webpack提供的热替换接口：

其实热替换的逻辑是需要开发者自己来实现的。换句话说，其实热替换就是需要开发者写好相关模块更新时的callback。

所以Webpack提供了如下的接口：

```JavaScript
module.hot
module.hot.accept(dependencies, callback)，接受(accept)给定依赖模块(dependencies)的更新，并触发一个 回调函数 来对这些更新做出响应。
module.hot.decline(dependencies)，拒绝给定依赖模块的更新，使用 'decline' 方法强制更新失败。
module.hot.dispose(callback)，添加一个处理函数，在当前模块代码被替换时执行。
module.hot.removeDisposeHandler(callback)，删除由 dispose 或 addDisposeHandler 添加的回调函数。
module.hot.status()，取得模块热替换进程的当前状态。
module.hot.check(autoApply)，测试所有加载的模块以进行更新，如果有更新，则应用它们。
module.hot.apply(options)，继续更新进程（只要 module.hot.status() === 'ready'）。
module.hot.addStatusHandler(callback)，注册一个函数来监听 status的变化。
module.hot.removeStatusHandler (callback)，移除一个注册的状态处理函数。
```

### 3. 目前收集到的支持热替换的插件有：

1. css-loader、style-loader和css-hot-loader，关于css的热替换loader，需要注意的是extract-text-webpack-plugin并不支持热替换
2. vue-loader，关于vue的热替换loader
3. react-hot-loader和react-transform-hmr，关于react的热替换loader

## 制作Loader

loader应该是一个函数，它接收字符串的输入，并返回字符串。当然输出不一定是字符串，可以通过webpack提供的api返回其他内容。

loader的职责是单一的，当用多个loader去处理处理一个文件（模块）时，loaders会被链式地从后往前执行。

## 制作Plugin

Webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler实例化的时候调用，一般apply方法会监听一些事件的发生并执行回调。

Compiler和Compilation是Plugin和Webpack之间的桥梁，Compiler表示整个webpack从启动到关闭的整个生命周期，而Compilation仅表示一次新的编译。Compiler和Compilation都继承自Tapable，所以可以用它们广播和监听事件。

Plugin可以做的事情很多：
1. 读取输出资源、代码块、模块及其依赖
2. 监听文件的变化
3. 修改输出资源和增加输出资源
4. 判断webpack使用了哪些插件

### Tapable

tapable是webpack官方开发维护的一个小型库,能够让我们为javascript模块添加并应用插件。 它可以被其它模块继承或混合。它类似于NodeJS的 EventEmitter 类,专注于自定义事件的发射和操作。 除此之外, Tapable 允许你通过回调函数的参数访问事件的生产者。

关键对象：
compiler 对象代表的是不变的webpack环境，是针对webpack的
compilation 对象针对的是随时可变的项目文件，只要文件有改动，compilation就会被重新创建。

## 关键概念

下面的概念便于你理解webpack：

1. 依赖图
2. 模块解析
3. 代码分割
4. 懒加载

下面的概念是Webpack进阶的内容：
1. __wabpack_require__
2. sourcemap
3. tree shaking
4. shimming

# 参考
《深入浅出 Webpack》
[webpack官方文档](https://www.webpackjs.com/)
[webpack原理](https://juejin.im/entry/5b0e3eba5188251534379615)
[Webpack揭秘——走向高阶前端的必经之路](https://juejin.im/post/5badd0c5e51d450e4437f07a)
[webpack踩坑之路 (2)——图片的路径与打包](https://www.cnblogs.com/ghost-xyx/p/5812902.html)
[Webpack HMR 原理解析](https://zhuanlan.zhihu.com/p/30669007)
[webpack 热加载原理探索](http://shepherdwind.com/2017/02/07/webpack-hmr-principle/)
[webpack之plugin内部运行机制](https://fengmiaosen.github.io/2017/03/21/webpack-core-code/)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack模型 #87

概述

运行模型

1. 初始化

2. 编译

3. 输出

监听模型下

事件模型

1. 初始化阶段

2. 编译阶段

3. 输出阶段

分析输出文件

1. JS文件

2. 非JS文件

比如css文件

比如图片文件

热替换原理

1. 实现的逻辑：

2. Webpack提供的热替换接口：

3. 目前收集到的支持热替换的插件有：

制作Loader

制作Plugin

Tapable

关键概念

参考

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

事件名	解释
初始化参数	从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。这个过程中还会执行配置文件中的插件实例化语句 new Plugin()。
实例化 Compiler	用上一步得到的参数初始化 Compiler 实例，Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置，全局只有一个 Compiler 实例。
加载插件	依次调用插件的 apply 方法，让插件可以监听后续的所有事件节点。同时给插件传入 compiler 实例的引用，以方便插件通过 compiler 调用 Webpack 提供的 API。
environment	开始应用 Node.js 风格的文件系统到 compiler 对象，以方便后续的文件寻找和读取。
entry-option	读取配置的 Entrys，为每个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工作做准备。
after-plugins	调用完所有内置的和配置的插件的 apply 方法。
after-resolvers	根据配置初始化完 resolver，resolver 负责在文件系统中寻找指定路径的文件。

事件名	解释
run	启动一次新的编译。
watch-run	和 run 类似，区别在于它是在监听模式下启动的编译，在这个事件中可以获取到是哪些文件发生了变化导致重新启动一次新的编译。
compile	该事件是为了告诉插件一次新的编译将要启动，同时会给插件带上 compiler 对象。
compilation	当 Webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被创建。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了很多事件回调供插件做扩展。
make	一个新的 Compilation 创建完毕，即将从 Entry 开始读取文件，根据文件类型和配置的 Loader 对文件进行编译，编译完后再找出该文件依赖的文件，递归的编译和解析。
after-compile	一次 Compilation 执行完成。
invalid	当遇到文件不存在、文件编译错误等异常时会触发该事件，该事件不会导致 Webpack 退出。
build-module	使用对应的 Loader 去转换一个模块。
normal-module-loader	在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析。
program	从配置的入口模块开始，分析其 AST，当遇到 require 等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。
seal	所有模块及其依赖的模块都通过 Loader 转换完成后，根据依赖关系开始生成 Chunk。

事件名	解释
should-emit	所有需要输出的文件已经生成好，询问插件哪些文件需要输出，哪些不需要。
emit	确定好要输出哪些文件后，执行文件输出，可以在这里获取和修改输出内容。
after-emit	文件输出完毕。
done	成功完成一次完成的编译和输出流程。
failed	如果在编译和输出流程中遇到异常导致 Webpack 退出时，就会直接跳转到本步骤，插件可以在本事件中获取到具体的错误原因。

Webpack模型 #87

Description

概述

运行模型

1. 初始化

2. 编译

3. 输出

监听模型下

事件模型

1. 初始化阶段

2. 编译阶段

3. 输出阶段

分析输出文件

1. JS文件

2. 非JS文件

比如css文件

比如图片文件

热替换原理

1. 实现的逻辑：

2. Webpack提供的热替换接口：

3. 目前收集到的支持热替换的插件有：

制作Loader

制作Plugin

Tapable

关键概念

参考

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions