• Webpack的打包原理

    Webpack的打包原理

    Webpack简介

    Webpack是一个打包模块化Javascript的工具，在Webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。 ——《深入浅出Webpack》

    其官网的首页图很形象地展示了Webpack的定义 如下图所示

    Webpack的定义

    分析打包后的文件 (webpack版本: 4.41.4)

    配置文件: webpack.config.js

    const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'none',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    入口文件: ./src/index.js

    let title = require('./title');
console.log(title);

    • 1
    • 2

    被入口文件导入的文件: ./src/title.js

    module.exports = '标题';

    • 1

    打包后的文件: main.js

    (function (modules) {
  // 模块缓存
  var installedModules = {};

  function __webpack_require__(moduleId) {
    // 检查模块是否在缓存中
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 创建一个新的模块，并放到缓存中
    var module = (installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {},
    });
    // 执行模块函数
    modules[moduleId].call(
      module.exports,
      module,
      module.exports,
      __webpack_require__
    );
    // 模块已加载成功
    module.l = true;
    // 返回此模块的导出对象
    return module.exports;
  }

  // 把modules对象放在__webpack_require__.m属性上
  __webpack_require__.m = modules;

  // 把模块的缓存对象放在__webpack_require__.c属性上
  __webpack_require__.c = installedModules;

  // 导出定义getter函数
  __webpack_require__.d = function (exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // 声明es6模块
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  // 包装es6模块
  __webpack_require__.t = function (value, mode) {
    if (mode & 1) value = __webpack_require__(value);
    if (mode & 8) return value;
    if (mode & 4 && typeof value === 'object' && value && value.__esModule)
      return value;
    var ns = Object.create(null);
    __webpack_require__.r(ns);
    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    if (mode & 2 && typeof value != 'string')
      for (var key in value)
        __webpack_require__.d(
          ns,
          key,
          function (key) {
            return value[key];
          }.bind(null, key)
        );
    return ns;
  };

  // 获取默认导出的函数，为了兼容非harmony模块
  __webpack_require__.n = function (module) {
    var getter =
      module && module.__esModule
        ? function getDefault() {
            return module['default'];
          }
        : function getModuleExports() {
            return module;
          };
    __webpack_require__.d(getter, 'a', getter);
    return getter;
  };

  // Object.prototye.hasOwnProperty
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };

  // 把公开访问路径放在__webpack_require__.p属性上
  __webpack_require__.p = '';

  // 加载入口模块并且返回exports (__webpack_require__.s: 指定入口模块ID)
  return __webpack_require__((__webpack_require__.s = './src/index.js'));
})({
  './src/index.js': function (module, exports, __webpack_require__) {
    let title = __webpack_require__('./src/title.js');
    console.log(title);
  },
  './src/title.js': function (module, exports) {
    module.exports = '标题';
  },
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104

    打包后文件中常用的几个方法

    __webpack_require__.r (声明es6模块)

    __webpack_require__.r = function (exports) {
    /**
     * Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用
     * 对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签
     * 通常只有内置的 Object.prototype.toString() 方法会去读取这个标签并把它包含在自己的返回值里
     */
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };
  
  -------------------------------------------------------------------------------------------
  
  实际可以理解成如下代码：
  
  __webpack_require__.r = function (exports) {
      exports[Symbol.toStringTag] = 'Module';
      exports.__esModule = true;
    }
    
 let exports = {};
 __webpack_require__.r(exports);
 console.log(Object.prototype.toString.call(exports));
 // 控制台打印结果："[object Module]"

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    __webpack_require__.o (Object.prototye.hasOwnProperty)

    // 实际就是对Object.prototype.hasOwnProperty.call做了一个包装
__webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
};

    • 1
    • 2
    • 3
    • 4

    __webpack_require__.d (导出定义getter函数)

    __webpack_require__.d = function (exports, name, getter) {
    // 检查形参name是否是形参exports的私有属性
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    __webpack_require__.n (获取默认导出的函数，为了兼容非harmony模块)

    __webpack_require__.n = function (module) {
var getter =
  module && module.__esModule
    ? function getDefault() { // ES6 modules
        return module['default'];
      }
    : function getModuleExports() { // common.js
        return module;
      };
__webpack_require__.d(getter, 'a', getter);
return getter;
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    __webpack_require__.t (包装es6模块)

    // 懒加载的时候用的
// require.t 一般来说核心用法是用来把一个任意模块都变成一个es模块
// import('./xxx').then(result => console.log(result))..不管懒加载的是一个common.js还是es6模块,都会变成es6模块的格式

// create a fake namespace object 创建一个模拟的命名空间对象，不管什么模块都转成es6模块
// mode & 1: value is a module id, require it value是一个模块ID，需要用require加载
// mode & 2: merge all properties of value into the ns // 将值的所有属性合并到ns中
// mode & 4: return value when already ns object 如果已经是ns对象了，则直接返回
// mode & 8 | 1: behave like require 等同于require方法
__webpack_require__.t = function (value, mode) {
    // 1转为二进制 0b0001
    if (mode & 1) value = __webpack_require__(value);
    // 8转为二进制 0b1000
    if (mode & 8) return value;
    // 4转为二进制 0b0100 value已经是es模块了，可以直接返回
    if (mode & 4 && typeof value === 'object' && value && value.__esModule)
      return value;
    var ns = Object.create(null);
    __webpack_require__.r(ns); // ns.__esModule=true
    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    if (mode & 2 && typeof value != 'string')
      // 把值拷贝到ns上
      for (var key in value)
        __webpack_require__.d(
          ns,
          key,
          function (key) {
            return value[key];
          }.bind(null, key)
        );
    return ns;
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    harmony

    顾名思义，harmony中文是和谐的意思。webpack_require.n方法就是为了兼容非harmony的模块。

    harmony

    common.js加载 common.js

    入口文件: ./src/index.js

    let title = require('./title');
console.log(title.name);
console.log(title.age);

    • 1
    • 2
    • 3

    被入口文件导入的文件: ./src/title.js

    exports.name = 'title_name';
exports.age = 'title_age';

    • 1
    • 2

    打包后的文件: main.js (自执行函数实参部分)

    {
    './src/index.js': function (module, exports, __webpack_require__) {
      let title = __webpack_require__('./src/title.js');
      console.log(title.name);
      console.log(title.age);
    },
    './src/title.js': function (module, exports) {
      exports.name = 'title_name';
      exports.age = 'title_age';
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    common.js加载 ES6 modules

    入口文件: ./src/index.js

    let title = require('./title');
console.log(title);

    • 1
    • 2

    被入口文件导入的文件: ./src/title.js

    export default 'title_name'; // 默认导出
export const age = 'title_age'; // 单个导出

    • 1
    • 2

    打包后的文件: main.js (自执行函数实参部分)

    {
    './src/index.js': function (module, exports, __webpack_require__) {
      let title = __webpack_require__('./src/title.js');
      console.log(title);
    },
    './src/title.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, 'age', function () {
        return age;
      });
      __webpack_exports__['default'] = 'title_name'; // 默认导出
      const age = 'title_age'; // 单个导出
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    ES6 modules 加载 ES6 modules

    入口文件: ./src/index.js

    import name, { age } from './title';
console.log(name);
console.log(age);

    • 1
    • 2
    • 3

    被入口文件导入的文件: ./src/title.js

    export default 'title_name'; // 默认导出
export const age = 'title_age'; // 单个导出

    • 1
    • 2

    打包后的文件: main.js (自执行函数实参部分)

    {
    './src/index.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__);
      var _title__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
        './src/title.js'
      );
      console.log(_title__WEBPACK_IMPORTED_MODULE_0__['default']);
      console.log(_title__WEBPACK_IMPORTED_MODULE_0__['age']);
    },

    './src/title.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, 'age', function () {
        return age;
      });
      __webpack_exports__['default'] = 'title_name'; // 默认导出
      const age = 'title_age'; // 单个导出
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    ES6 modules 加载 common.js

    入口文件: ./src/index.js

    import name, { age } from './title';
console.log(name);
console.log(age);

    • 1
    • 2
    • 3

    被入口文件导入的文件: ./src/title.js

    exports.name = 'title_name';
exports.age = 'title_age';

    • 1
    • 2

    打包后的文件: main.js (自执行函数实参部分)

    {
    './src/index.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__);
      var _title__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
        './src/title.js'
      );
      var _title__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(
        _title__WEBPACK_IMPORTED_MODULE_0__
      );

      console.log(_title__WEBPACK_IMPORTED_MODULE_0___default.a);
      console.log(_title__WEBPACK_IMPORTED_MODULE_0__['age']);
    },
    './src/title.js': function (module, exports) {
      exports.name = 'title_name';
      exports.age = 'title_age';
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    针对harmony的简单总结
    • 如果模块是用common.js写的，则不需要做任何转换
    • 如果模块里有export或者import或者都有
      • webpack_require.r(webpack_exports); 先表明是ES6模块
    • 如果是ES6 modules 加载 common.js，并且有默认导入
      • 需要通过__webpack_require__.n(title__WEBPACK_IMPORTED_MODULE_0_);得到默认导入，_title__WEBPACK_IMPORTED_MODULE_0___default.a就是默认导入了

    异步加载

    入口文件: ./src/index.js

    let importBtn = document.getElementById('import');
importBtn.addEventListener('click', () => {
  import(/* webpackChunkName: 'title' */'./title').then(result => {
    console.log(result);
  })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    被入口文件导入的文件: ./src/title.js

    exports.name = 'title_name';
exports.age = 'title_age';

    • 1
    • 2

    打包后的文件: main.js (自执行函数实参部分)

    {
  './src/index.js': function (module, exports, __webpack_require__) {
    let importBtn = document.getElementById('import');
    importBtn.addEventListener('click', () => {
      // 下面代码就是 import('./title')
      __webpack_require__
        .e('title')
        .then(
          __webpack_require__.t.bind(null, /*! ./title */ './src/title.js', 7)
        )
        .then((result) => {
          // result就是这个title的导出对象
          console.log(result);
        });
    });
  },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    打包后的文件(chunk)：title.js

    (window['webpackJsonp'] = window['webpackJsonp'] || []).push([
  ['title'],
  {
    './src/title.js': function (module, exports) {
      exports.name = 'title_name';
      exports.age = 'title_age';
    },
  },
]);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    针对懒加载的总结
    • 首先会执行__webpack_require__.e(‘title’), 并传入chunkId
    • webpack_require.e(‘title’)方法会通过JSONP的方式，向页面的head添加一个script标签，并且script标签的src为chunkId + ‘.js’
    • 此刻会执行打包后的title.js中的代码，也就是会执行webpackJsonpCallback这个方法
    • webpackJsonpCallback方法会把title这个代码块设置为已加载成功状态，并依次让resolves执行，把promise变成成功状态
    • 进入__webpack_require__.t.bind(‘./src/title.js’, 7)方法
      • 先执行__webpack_require__方法
      • 创建ns对象，并为它赋值 ns.__esModule = true; 和 ns.default = value;
      • 把vaule上的属性拷贝一份到ns上，返回ns。也就是最终结果

    编译流程

    基本概念

    • Entry 入口，webpack执行构建的第一步将从Entry开始，可抽象成输入
    • Module 模块，在webpack里一切皆模块，一个模块对应着一个文件。webpack会从配置的Entry开始递归找出所有依赖的模块。
    • Chunk 代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
    • Loader 模块转换器，用于把模块原内容按照需求转换成新内容。
    • Plugin 扩展插件，在webpack构建流程中特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

    理解事件流机制 Tapable

    • webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable。
    • Tapable 事件流机制保证了插件的有序性，将各个插件串联起来， Webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webapck机制中，去改变webapck的运作，使得整个系统扩展性良好。

    理解Compiler

    Compiler 对象包含了当前运行Webpack的配置，包括entry、output、loaders等配置，这个对象在启动Webpack时被实例化，而且是全局唯一的。Plugin可以通过该对象获取到Webpack的配置信息进行处理。

    理解Compilation

    Compilation对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 Compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息，简单来讲就是把本次打包编译的内容存到内存里。Compilation 对象也提供了插件需要自定义功能的回调，以供插件做自定义处理时选择使用拓展。
    简单来说,Compilation的职责就是构建模块和Chunk，并利用插件优化构建过程。

    编译流程

    针对编译流程的简单总结

    Webpack的运行是个串行的过程，从启动到结束会依次执行以下流程：

    • 初始化参数:从配置文件和shell语句中读取与合并参数，得出最终参数。
    • 开始编译:用得到的参数初始化compiler对象，加载所有配置的插件，执行对象的Run方法开始编译。
    • 确定入口:根据配置中的entry找出所有入口文件。
    • 编译模块:从入口文件出发，调用所有配置的loader对模块进行翻译，再找出该模块所依赖的模块，再- 递归本步骤。直到所有入口依赖文件都经过了本步骤的处理。（此处为深度优先遍历）
    • 完成模板编译:使用loader翻译完所有模块后，得到每个模块被翻译后的最终内容，以及它们之间的依赖关系。
    • 输出资源:根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。
    • 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
  • 相关阅读:
    springMvc46-自定义user转换器
    集火全屋智能“后装市场”，真正玩得转的没几个
    【网络通信 -- WebRTC】项目实战记录 -- mediasoup android 适配 webrtc m94
    [附源码]java毕业设计图书管理系统
    CLIP模型原理与代码实现详解
    一文详解Redis企业版软件！
    Spring Boot 2.x源码系列【5】启动流程深入解析之准备环境
    电脑dll丢失应该怎么解决，dll文件丢失怎么恢复方法分享
    深度剖析集成学习GBDT
    Vue2与Vue3区别-computed、watch、watchEffect
  • 原文地址：https://blog.csdn.net/kang_k/article/details/126873507