https://juejin.cn/post/6943468761575849992
https://www.cnblogs.com/lzkwin/p/11878509.html

前言：webpack到底将代码编译成了什么

1.commonJS下的打包结果

webpack4打包结果

index.js 引入

const sayHello = require('./hello')
console.log(sayHello('leah'))

hello.js 导出

module.exports = function (name) {
    return 'hello' + name
}

webpack4执行打包结果

 (function(modules) { // webpackBootstrap
     // 缓存已经加载过的 module 的 exports
     var installedModules = {};
     // __webpack_require__ 与 commonjs 的 require类似，它是 webpack加载函数，用来加载webpack定义的模块，返回exports导出对象
     function __webpack_require__(moduleId) {
         // 如果缓存中存在当前模块就直接返回
         if(installedModules[moduleId]) {
             return installedModules[moduleId].exports;
         }
         //第一次加载时， 初始化时模块对象，并将当前模块进行缓存
         var module = installedModules[moduleId] = {
             i: moduleId,  // 模块id
             l: false,     // 标记是否已加载
             exports: {}   // 模块导出对象
         };
         // 执行模块函数，改变模块包裹函数内部的this指向，module当前模块对象的引用，module.exports 模块导出对象的引用，__webpack_require__ 用于在模块中加载其他模块
         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
         // 标记已加载模块
         module.l = true;
         return module.exports;
     }
     // 加载入口模块
     return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
 ({
    "./src/hello.js":
    (function(module, exports) {
        eval("module.exports = function (name) {\n    return 'hello' + name\n}\n\n//# sourceURL=webpack:///./src/hello.js?");
    }),
     "./src/index.js":
    (function(module, exports, __webpack_require__) {
        eval("const sayHello = __webpack_require__(/*! ./hello */ \"./src/hello.js\")\nconsole.log(sayHello('leah'))\n\n//# sourceURL=webpack:///./src/index.js?");
    })
  });

上面代码的核心骨架其实就是一个IIFE （立即调用函数表达式），简化如下：

(function(modules){
    // ...
})({
    path1: function1,
    path2: function2
})

这个立即执行函数接受一个对象 modules 作为参数

({
    "./src/hello.js":
    (function(module, exports) {
        eval("module.exports = function (name) {\n    return 'hello' + name\n}\n\n//# sourceURL=webpack:///./src/hello.js?");
    }),
     "./src/index.js":
    (function(module, exports, __webpack_require__) {
        eval("const sayHello = __webpack_require__(/*! ./hello */ \"./src/hello.js\")\nconsole.log(sayHello('leah'))\n\n//# sourceURL=webpack:///./src/index.js?");
    })
 });

这个modules包含了所有打包后的模块，key 为依赖文件路径， value 是一个简单处理过后的函数，函数内部的代码不完全等同于是我们编写的源码，而是被webpack包裹后的内容。 这就是modules接收到的数据。

需要将require方法改写成webpack_require方法，因为浏览器端不支持require方法。

它的执行过程如下：

1. 加载模块并判断是否有缓存，如果有缓存就返回缓存的模块的export对象，也就是 module.exports
2. 否则就是第一次加载，初始化模块对象，并进行缓存
3. 执行文件路径对应的模块函数
4. 将这个模块标记为已加载
5. 执行完模块返回该模块的 export 对象

webpack5打包结果

 (() => { // webpackBootstrap
  // 将原本传入的key value 文件对象直接放到了函数里面
     var __webpack_modules__ = ({
    "./src/hello.js":
    ((module) => {
        eval("module.exports = function (name) {\n    return 'hello' + name\n}\n\n//# sourceURL=webpack://webpack-demo/./src/hello.js?");
     }),
     "./src/index.js":
     ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
        eval("const sayHello = __webpack_require__(/*! ./hello */ \"./src/hello.js\")\nconsole.log(sayHello('leah'))\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?");
     })
  });
         // 缓存模块
         var __webpack_module_cache__ = {};
         // 模块加载函数
         function __webpack_require__(moduleId) {
             // 如果缓存中存在当前模块就直接返回
             var cachedModule = __webpack_module_cache__[moduleId];
             if (cachedModule !== undefined) {
                 return cachedModule.exports;
             }
             // 第一次加载时， 初始化时模块对象，并将当前模块进行缓存
             var module = __webpack_module_cache__[moduleId] = {
                 // no module.id needed
                 // no module.loaded needed
                 exports: {}
             };
             // 执行模块函数，module当前模块对象的引用，module.exports 模块导出对象的引用，__webpack_require__ 用于在模块中加载其他模块
             __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
             // Return the exports of the module
             return module.exports;
         }
         // startup
         // Load entry module and return exports
         // This entry module can't be inlined because the eval devtool is used.
         var __webpack_exports__ = __webpack_require__("./src/index.js");
     })()
    ;

webpack5 将function改成了箭头函数，这样this指向就更加清晰，放弃了原来的 call方法调用。

将原本通过modules传递的参数的 key value 直接写到了函数中。

    var __webpack_modules__ = ({
    "./src/hello.js":
    ((module) => {
        eval("module.exports = function (name) {\n    return 'hello' + name\n}\n\n//# sourceURL=webpack://webpack-demo/./src/hello.js?");
     }),
     "./src/index.js":
     ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
        eval("const sayHello = __webpack_require__(/*! ./hello */ \"./src/hello.js\")\nconsole.log(sayHello('leah'))\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?");
     })
  });

打包结果更加简洁。

2.ES Module规范下的打包结果

webpack4 的打包结果

 (function(modules) { // webpackBootstrap
     // The module cache
     var installedModules = {};
     // The require function
     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;
     }
     // define __esModule on exports
     __webpack_require__.r = function(exports) {
         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         }
         Object.defineProperty(exports, '__esModule', { value: true });
     };
     // Load entry module and return exports
     return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
 ({
     "./src/hello.js":
     (function(module, __webpack_exports__, __webpack_require__) {
        eval("__webpack_require__.r(__webpack_exports__);\n// module.exports = function (name) {\n//     return 'hello' + name\n// }\n\nconst sayHello = function (name) {\n    return 'hello' + name\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (sayHello);\n\n//# sourceURL=webpack:///./src/hello.js?");
     }),
     "./src/index.js":
     (function(module, __webpack_exports__, __webpack_require__) {
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _hello__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hello */ \"./src/hello.js\");\n// const sayHello = require('./hello')\n// console.log(sayHello('leah'))\n\n\nconsole.log(Object(_hello__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('leah'))\n\n//# sourceURL=webpack:///./src/index.js?");
     })
 });

webpack5的打包结果

 (() => { // webpackBootstrap
     var __webpack_modules__ = ({
    "./src/hello.js":
      ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// module.exports = function (name) {\n//     return 'hello' + name\n// }\n\nconst sayHello = function (name) {\n    return 'hello' + name\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (sayHello);\n\n//# sourceURL=webpack://webpack-demo/./src/hello.js?");
      }),
      "./src/index.js":
      ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _hello__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hello */ \"./src/hello.js\");\n// const sayHello = require('./hello')\n// console.log(sayHello('leah'))\n\n\nconsole.log((0,_hello__WEBPACK_IMPORTED_MODULE_0__.default)('leah'))\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?");
      })
    });
         // The module cache
         var __webpack_module_cache__ = {};
         // The require function
         function __webpack_require__(moduleId) {
             // Check if module is in cache
             var cachedModule = __webpack_module_cache__[moduleId];
             if (cachedModule !== undefined) {
                 return cachedModule.exports;
             }
             // Create a new module (and put it into the cache)
             var module = __webpack_module_cache__[moduleId] = {
                 // no module.id needed
                 // no module.loaded needed
                 exports: {}
             };
             // Execute the module function
             __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
             // Return the exports of the module
             return module.exports;
         }
         /* webpack/runtime/make namespace object */
         (() => {
             // define __esModule on exports
             __webpack_require__.r = (exports) => {
                 if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
                     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
                 }
                 Object.defineProperty(exports, '__esModule', { value: true });
             };
         })();
         var __webpack_exports__ = __webpack_require__("./src/index.js");
     })()
    ;

可以看到esmodule的打包结果和 commonjs的打包结果没有太大区别，唯一的不同是处理后的模块代码.

 ({
     "./src/hello.js":
     (function(module, __webpack_exports__, __webpack_require__) {
        eval("__webpack_require__.r(__webpack_exports__);\n// module.exports = function (name) {\n//     return 'hello' + name\n// }\n\nconst sayHello = function (name) {\n    return 'hello' + name\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (sayHello);\n\n//# sourceURL=webpack:///./src/hello.js?");
     }),
     "./src/index.js":
     (function(module, __webpack_exports__, __webpack_require__) {
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _hello__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hello */ \"./src/hello.js\");\n// const sayHello = require('./hello')\n// console.log(sayHello('leah'))\n\n\nconsole.log(Object(_hello__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('leah'))\n\n//# sourceURL=webpack:///./src/index.js?");
     })
 });

对比上面的Commonjs规范处理结果

({
    "./src/hello.js":
    (function(module, exports) {
        eval("module.exports = function (name) {\n    return 'hello' + name\n}\n\n//# sourceURL=webpack:///./src/hello.js?");
    }),
     "./src/index.js":
    (function(module, exports, __webpack_require__) {
        eval("const sayHello = __webpack_require__(/*! ./hello */ \"./src/hello.js\")\nconsole.log(sayHello('leah'))\n\n//# sourceURL=webpack:///./src/index.js?");
    })
 });

ES6 module 传入的参数 function(module, webpack_exports, webpack_require)，

Commonjs 传入的参数 function(module, exports)，

webpack_require.r()函数的作用是给webpack_exports添加一个__esModule为true的属性，表示这是一个 ES6 module。

如果该export对象是 ES6 module，则返回module[‘default’]，即export default对应的变量。如果不是 ES6 module 则直接返回export。

3.按需加载下的打包结果

webpack5打包结果

在index.js文件中适用动态引入的方法引入 hello.js

import('./hello').then(sayHello => {
    console.log(sayHello('leah'))
})

安装动态引入的babel插件

npm install babel-plugin-dynamic-import-webpack

在 webpack.config.js中添加配置

module.exports = {
    module: {
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    "plugins":[
                        "dynamic-import-webpack"
                    ]
                }
            }
        ]
    }
}

执行 npm run build 进行打包

可以看到此时打包结果是两个文件，一个是主文件main，一个是 src_hello.js文件，这个src_hello.js文件对应的代码就是动态引入的代码。

main.js

 (() => { // webpackBootstrap
    var __webpack_modules__ = ({
    "./src/index.js":
    ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
        eval("// const sayHello = require('./hello')\n// console.log(sayHello('leah'))\n// import sayHello from './hello';\n// import sayHello2 from './hello2'\n// import sayHello from './hello'\n// console.log(sayHello('leah'))\nnew Promise(function (resolve) {\n  __webpack_require__.e(/*! require.ensure */ \"src_hello_js\").then((function (require) {\n    resolve(__webpack_require__(/*! ./hello */ \"./src/hello.js\"));\n  }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);\n}).then(function (sayHello) {\n  console.log(sayHello('leah'));\n});\n\n//# sourceURL=webpack://webpack-demo/./src/index.js?");
    })
     });
     var __webpack_module_cache__ = {};
   // 模块加载函数
   function __webpack_require__(moduleId) {
    // 如果缓存中存在当前模块就直接返回
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    // 第一次加载时， 初始化时模块对象，并将当前模块进行缓存
    var module = __webpack_module_cache__[moduleId] = {
      // no module.id needed
      // no module.loaded needed
      exports: {}
    };
    // 执行模块函数，改变模块包裹函数内部的this指向，module当前模块对象的引用，module.exports 模块导出对象的引用，__webpack_require__ 用于在模块中加载其他模块
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    // Return the exports of the module
    return module.exports;
  }
     // expose the modules object (__webpack_modules__)
     __webpack_require__.m = __webpack_modules__;
     /* webpack/runtime/ensure chunk */
     (() => {
         __webpack_require__.f = {};
         // This file contains only the entry chunk.
         // The chunk loading function for additional chunks 实例化一个Promise.all 异步插入script脚本
         __webpack_require__.e = (chunkId) => {
             return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
                 __webpack_require__.f[key](chunkId, promises);
                 return promises;
             }, []));
         };
     })();
     /* webpack/runtime/hasOwnProperty shorthand */
     (() => {
         __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
     })();
     /* webpack/runtime/load script */
     (() => {
         var inProgress = {};
         var dataWebpackPrefix = "webpack-demo:";
         // loadScript function to load a script via script tag  
    // 通过script标记加载脚本
         __webpack_require__.l = (url, done, key, chunkId) => {
       // 如果已经加载就返回
             if(inProgress[url]) { inProgress[url].push(done); return; }
             var script, needAttach;
             if(key !== undefined) {
                 var scripts = document.getElementsByTagName("script");
                 for(var i = 0; i < scripts.length; i++) {
                     var s = scripts[i];
                     if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
                 }
             }
       // 如果script 标签不存在就创建
             if(!script) {
                 needAttach = true;
         // 生成一个 script 标签
                 script = document.createElement('script');
                 script.charset = 'utf-8';
         // script 标签设置一个 2 分钟的超时时间
                 script.timeout = 120; 
                 if (__webpack_require__.nc) {
                     script.setAttribute("nonce", __webpack_require__.nc);
                 }
                 script.setAttribute("data-webpack", dataWebpackPrefix + key);
        // URL 是 需要动态导入模块的 URL。
                 script.src = url;
             }
             inProgress[url] = [done];
             var onScriptComplete = (prev, event) => {
                 // avoid mem leaks in IE.
                 script.onerror = script.onload = null;
                 clearTimeout(timeout);
                 var doneFns = inProgress[url];
                 delete inProgress[url];
                 script.parentNode && script.parentNode.removeChild(script);
                 doneFns && doneFns.forEach((fn) => (fn(event)));
                 if(prev) return prev(event);
             }
             ;
             var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
             script.onerror = onScriptComplete.bind(null, script.onerror);
             script.onload = onScriptComplete.bind(null, script.onload);
       // 然后添加到页面中 document.head.appendChild(script)，开始加载模块。
             needAttach && document.head.appendChild(script);
         };
     })();
     /* webpack/runtime/jsonp chunk loading */
     (() => {
         // no baseURI
         // object to store loaded and loading chunks
         // undefined = chunk not loaded, null = chunk preloaded/prefetched
         // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
            // 用来保存已经加载和正在加载的模块
            // undefined表示chunk未加载，null表示chunk preloaded/prefetched
            // Promise = 模块正在加载, 0 表示已经加载
         var installedChunks = {
             "main": 0   // main模块已经加载
         };
         /**
 * 
 * __webpack_require__.f的作用是判断模块是否已加载（或加载中），如果都不是，就利用jsonp加载模块。
 */
         __webpack_require__.f.j = (chunkId, promises) => {
                 // JSONP chunk loading for javascript
                 var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
                 if(installedChunkData !== 0) { // 0 表示已经加载".
                     // a Promise means "currently loading  
           // promise表示正在加载".
                     if(installedChunkData) {
             // 将这个加载中的 Promise 推入 promises 数组。
                         promises.push(installedChunkData[2]);
                     } else {
                         if(true) { // all chunks have JS  
                             // setup Promise in chunk cache
               //就新建一个 Promise，用于加载需要动态导入的模块。
                             var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
               // 将这个加载中的 Promise 推入 promises 数组。
                             promises.push(installedChunkData[2] = promise); // installedChunkData = [resolve, reject，promise]，例如installedChunkData保存新创建的promise以及他的resolve和reject promises => [promise]
                             // start chunk loading 
               // 开始加载模块
                             var url = __webpack_require__.p + __webpack_require__.u(chunkId);
                             // create error before stack unwound to get useful stacktrace later  
              // 在堆栈展开之前创建错误，以便稍后获得有用的stacktrace
                             var error = new Error();
                             var loadingEnded = (event) => {
                                 if(__webpack_require__.o(installedChunks, chunkId)) {
                                     installedChunkData = installedChunks[chunkId];
                                     if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
                                     if(installedChunkData) {
                                         var errorType = event && (event.type === 'load' ? 'missing' : event.type);
                                         var realSrc = event && event.target && event.target.src;
                                         error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
                                         error.name = 'ChunkLoadError';
                                         error.type = errorType;
                                         error.request = realSrc;
                                         installedChunkData[1](error);
                                     }
                                 }
                             };
              // 加载模块逻辑
                             __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
                         } else installedChunks[chunkId] = 0;
                     }
                 }
         };
         // install a JSONP callback for chunk loading 
         var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
             var [chunkIds, moreModules, runtime] = data;
             // add "moreModules" to the modules object,
             // then flag all "chunkIds" as loaded and fire callback
             var moduleId, chunkId, i = 0;
             for(moduleId in moreModules) {
                // 如果在 moreModules 中能找到 moduleId 属性就代表
                 if(__webpack_require__.o(moreModules, moduleId)) {
                     __webpack_require__.m[moduleId] = moreModules[moduleId];
                 }
             }
             if(runtime) runtime(__webpack_require__);
             if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
             for(;i < chunkIds.length; i++) {
                 chunkId = chunkIds[i];
                 if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
                     installedChunks[chunkId][0]();
                 }
                 installedChunks[chunkIds[i]] = 0; // 把模块标记为已加载
             }
         }
          // 把模块数据放到 self["webpackChunkwebpack_demo"] 数组中
         var chunkLoadingGlobal = self["webpackChunkwebpack_demo"] = self["webpackChunkwebpack_demo"] || [];
         chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
         chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
     })();
 })()
;

src_hello.js

(self["webpackChunkwebpack_demo"] = self["webpackChunkwebpack_demo"] || []).push([["src_hello_js"],{
 "./src/hello.js":
 ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// module.exports = function (name) {\n//     return 'hello' + name\n// }\nvar sayHello = function sayHello(name) {\n  return 'hello' + name;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (sayHello);\n\n//# sourceURL=webpack://webpack-demo/./src/hello.js?");
 })
}]);

main 文件代码有点长，其核心方法有以下几个：

**__webpack_require__.f.j **和 **__webpack_require__.l** 还有 **webpackJsonpCallback**

webpack_require.f.j 和 webpack_require.l 的作用是判断模块是否已经加载，（在webpack4中叫webpack_require.e,webpack5 将它拆分成了两个方法） ，若没有加载就通过 jsonp 加载模块文件，加载完模块文件就执行 webpackJsonpCallback 函数将模块存在全局对象 self上，也就是window上。（webpack4 的写法是(window[“webpackJsonp”] = window[“webpackJsonp”] || []).push([[1],）。

4.tree-shaking 下的打包结果

仔细观察上面的ESModule打包结果，就会发现还有个两个不同于Commonjs规范下的打包属性，harmony default export 和 harmony import，这是干什么的呢？

如果有对大名鼎鼎的 tree-shaking 了解过的话，就知道 tree-shaking 正是借助于 es6 module 静态分析的特点，在编译阶段将代码的使用情况进行了标注，然后在生产模式下对没用到的代码进行摇树闪电，具体是怎么标注的呢？我们看下面的代码打包结果：

webpack4打包结果

在 util.js 中导出两个方法

export function func1() {
    return 'func1'
}
export function func2() {
    return 'func2'
}

在 index.js 中导入

import {
    func1,
    func2
} from './util'
let result1 = func1()
console.log(result1)

在webpack.config.js中开启生产模式，这是因为webpack在生产模式下才会开启摇树，同时为了看到webpack 对代码使用情况的标注，暂时先关闭optimization，配置如下：

mode: 'production',
    optimization:{
        minimize:false, 
        concatenateModules: false,
    },

我记得之前是要关闭掉babel的模块转换功能，保留原有的es6语法，助于tree-shaking静态分析

const config = {
    presets: [
     [
      '[@babel/preset-env]',
      {
       modules: false
      }
     ]
    ]
   };

npm run build 查看打包结果

精简之后的代码如下：

 (function(modules) { // webpackBootstrap
 })
 ([
    (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return func1; });
    /* unused harmony export func2 */
    function func1() {
      return 'func1';
    }
    function func2() {
      return 'func2';
    }
    }),
 ]);
 (() => {
/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(293);
// tree-shaking
let result1 = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .func1 */ .w)();
console.log(result1);
})();

可以看到被使用过的 export 标记为 / harmony export ([type]) / ，其中 [type] 和 webpack 内部有关，可能是 binding、immutable 等等；

没被使用过的 export 标记为 / unused harmony export [FuncName] / ，其中 [FuncName] 是 export 的方法名称；

所有的 import 标记为 / harmony import /

接下来我们看一下摇树之后的代码结构，修改webpack配置，开启摇树

    mode: 'production',
    optimization:{
        usedExports:true, // Webpack 将识别出它认为没有被使用的代码，并在最初的打包步骤中给它做标记。
        minimize:true, // 支持删除死代码的压缩器
        concatenateModules: false,
    },

打包之后的代码

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";function r(){return"func1"}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";n.r(t);var r=n(0);let o=Object(r.a)();console.log(o)}]);

可以看到只打包了func1, func2没有被打包。

webpack5 打包结果

代码分析阶段：

(() => { // webpackBootstrap
     "use strict";
     var __webpack_modules__ = ({
 293:
 ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "w": () => (/* binding */ func1)
/* harmony export */ });
/* unused harmony export func2 */
function func1() {
  return 'func1';
}
function func2() {
  return 'func2';
}
 })
     });
var __webpack_exports__ = {};
(() => {
/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(293);
// tree-shaking
let result1 = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .func1 */ .w)();
console.log(result1);
})();
 })()

摇树结果：

(()=>{"use strict";var r={293:(r,e,t)=>{function o(){return"func1"}t.d(e,{w:()=>o})}},e={};function t(o){var n=e[o];if(void 0!==n)return n.exports;var c=e[o]={exports:{}};return r[o](c,c.exports,t),c.exports}t.d=(r,e)=>{for(var o in e)t.o(e,o)&&!t.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:e[o]})},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{let r=(0,t(293).w)();console.log(r)})()})();

可以看到webpack4 和webpack5的处理结果都差不多，都去掉了未使用的地方。官方解释是webpack现在可以针对导出的嵌套模块进行访问，重新导出对象时，可以改善tree shaking。

TODO：差异分析

webpack5新特性

https://juejin.cn/post/7123969545387114509
https://juejin.cn/post/6844903795286081550

1.更好的tree-shaking体验

2.优化持久缓存

3.nodejs的polyfill脚本被移除

一、webpack工作原理

https://juejin.cn/post/6859538537830858759#heading-9

1. 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数； ```javascript //通过此文件，需要解析编译用户配置的webpack.config.js文件

//1.需要找到当前执行名的路径 拿到webpack.config.js //1.1拿到文件路径 let path = require(‘path’) //1.2config配置文件 let config = require(path.resolve(__dirname)) //1.3编译配置文件 let Compiler = require(‘./lib/Compiler’) let compiler = new Compiler(config) //1.4运行 compiler.run()

2. 开始编译： 用上一步得到的参数初始化Complier对象，加载所有配置的插件，执行对象的run方法开始执行编译；
```javascript
class Complier{
    constructor(config){
        this.config = config
        //需要保存入口文件的路径
        this.entryId  //主模块路径 "./src/index.js"
        //需要保存所有模块的依赖
        this.module = {}
        //入口路径
        this.entry = config.entry
        //工作目录 是指执行打包命令的文件夹地址 比如在d:/aa/b目录下执行 npm run build 那么cwd就是d:/aa/b
        this.root = process.cwd()
    }
    buildModule(modulePath,isEntry){
    } 
    emitFile(){
    }
    run(){
        //创建模块的依赖关系
        this.buildModule(path.resolve(this.root,this.entry),true) //true表示是主模块
        //发射一个文件 打包后的文件
        this.emitFile()
    }
}
module.exports = Complier

1. 在Compiler文件中写主要的打包逻辑，拿到webpack.config.js里面的配置信息，解析入口，解析文件依赖关系，发射文件。

   getSource(modulePath){
        //拿到模块内容
        let content = fs.readFileSync(modulePath,'utf8')
        return content
    }
    //构建模块
    buildModule(modulePath,isEntry){
        //拿到路径对应的内容
        let source = this.getSource(modulePath)
        //模块id 
        let moduleName = './'+path.relative(this.root, modulePath)
        console.log(sorce,moduleName) //sorce: let str = require('./a.js') console.log(str) moduleName: './src/index.js'
    } 
    emitFile(){
    }
    run(){
        //创建模块的依赖关系
        this.buildModule(path.resolve(this.root,this.entry),true) //true表示是主模块
        //发射一个文件 打包后的文件
        this.emitFile()
    }

2. 大概流程就是这样，构建模块时，我们需要拿到模块的内容（我们编写的源码）。这个通过getSource函数拿到即可。我们还需要拿到模块id

3. 确定入口： 根据配置中的entry找出所有入口文件；

4. 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
   下面需要把let str = require(‘./a.js’) 这种，/a.js转换成 ‘./src/a.js’ ，还有一个是将require方法改成 webpack_requireconsole.log，这就是解析语法树的工作
   parse方法需要安装几个包来解析,还需要看看ast的结构

   //解析源码
    //babylon 把源码转换成ast
    // @babel/traverse  对 AST树进行遍历编译，得到新的 AST树；
    //@babel/types
    //@babel/generator  通过 AST树生成 ES5 代码。
    parse(source,parentPath){ //AST解析语法树
        console.log(source,parentPath)
        let ast = babylon.parse(source)
        let dependencies = [] //存放依赖模块
        traverse(ast,{
            CallExpression(p){
                let node = p.node //对应的节点
                if(node.callee.name === 'require') {
                    node.callee.name = "__webpack_require__" //改require名字
                    let moduleName = node.arguments[0].value //取到引用模块的名字 a
                    moduleName = moduleName + (path.extname(moduleName)?'': '.js') //拼接成./a.js
                    moduleName = './'+path.join(parentPath,moduleName) // ./src/a.js
                    dependencies.push(moduleName) //将这个依赖模块存入数组
                    node.arguments = [traverse.stringLiteral(moduleName)] //改源码
                }
            }
        })
        let sourceCode =  generator(ast).code
        return {sourceCode,dependencies}
    }
    //构建模块
    buildModule(modulePath,isEntry){
        //拿到路径对应的内容
        let source = this.getSource(modulePath)
        //模块id 'src/index.js'
        let moduleName = './'+path.relative(this.root, modulePath)
        console.log(sorce,moduleName) //sorce: let str = require('./a.js') console.log(str) moduleName: './src/index.js'
        if(isEntry){
            this.entryId = moduleName //保存入口文件名字
        }
        //解析需要把source源码进行改造 返回一个依赖列表 比如index.js文件里面引入了a.js,需要把这个a.js进行解析，a.js里面要是再引入b.js也要把b.js对应的内容解析
        let {sourceCode,dependencies} = this.parse(source,path.dirname(moduleName)) //  path.dirname(moduleName)取父路径 .src 
        console.log(sourceCode,dependencies)
        //把模块路径和模块中的内容对应起来
        this.modules[moduleName] = sourceCode
        //若依赖模块里面又依赖别的模块就需要递归解析
        dependencies.forEach(dep=>{ 
            this.buildModule(path.join(this.root,dep),false) //false表示不是主模块
        })
    } 
    emitFile(){
    }
    run(){
        //创建模块的依赖关系
        this.buildModule(path.resolve(this.root,this.entry),true) //true表示是主模块
        console.log(this.modules,this.entryId)
        //发射一个文件 打包后的文件
        this.emitFile()
    }

5. 完成模块编译： 在经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及他们之间的依赖关系；

6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成： 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

底层原理不太了解

vuex直接赋值是生效的，页面不会更新，

学习建议：底层原理，

计算机组成原理、

history模式：地址很像url，需要

二、Tree Shaking的使用和原理分析

https://juejin.im/post/6844903544756109319

1.Tree Sharking 原理

Tree-Shaking 最早是由 Rich Harris 在打包⼯具Rollup 提出并且实现的，其实在更早，Google Closure Compiler 也做过类似的事情。在 Webpack 2 中吸取了 Tree-Shaking 功能，并且在 Webpack 中得到实现。
⽆⽤代码消除(Dead Code Elimination - DCE)Tree-Shaking 的本质是消除⽆⽤的 JavaScript 代码。

Tree-Shaking 是 DCE 的⼀种新的实现，Javascript 同传统的编程语⾔不同的是，JavaScript 绝⼤多数情况是浏览器中执⾏，需要通过⽹络进⾏加载，然后解析 JavaScript ⽂件再执⾏。

Tree-Shaking 和传统的 DCE 的⽅法又不太⼀样，传统的 DCE 消除不可能执⾏的代码：

• 程序中没有执⾏的代码，如不可能进⼊的分⽀，return 之后的语句等
• 导致 dead variable 的代码，写⼊变量之后不再读取的代码

和 DCE 不同的是，Tree-Shaking 更关注于消除没有⽤到的代码。
Webpack 是基于 ES6 Modules 静态语法解析的构建⼯具，Tree-Shaking 之所以能够在 Webpack 实现，依靠 ES6 Modules 静态解析的特性。ES6 的模块声明保证了依赖关系是提前确定的，使得静态分析成为可能，这样在 Webpack 中代码不需要执⾏就可以知道是否被使⽤，⾃然就知道哪些是⽆⽤的代码了。
ES6 Modules 特点：

• 只能作为模块顶层的语句出现
• ES6 中 import 和 export 是显性声明的
• import 的模块名只能是字符串常量
• ES6 模块的依赖关系是可以根据 import 引⽤关系推导出来的。
• ES6 模块的依赖关系与运⾏时状态⽆关，也就是说 import binding 是 immutable 的。

上⾯这些 ES6 Modules 的特点是 Tree-Shaking 的基础。

静态分析或者说依赖关系与运⾏时状态⽆关就是说：不执⾏代码就能知道引⽤了什么模块。⽤ cjs 的 require ⼀个模块，就是动态的，只有执⾏之后才知道引⽤的什么模块，这个就不能通过静态分析去做优化。
所以这也是为什么 Rollup 和 Webpack 都要⽤ ES6 Module 语法才能实现 Tree-Shaking

2.Tree Sharking 运⾏时

Webpack 的 Tree-Shaking 实际分了两步来实现：

1. Webpakck 分析 ES6 Modules 的引⼊和使⽤情
   况，去除不使⽤的 import 引⼊
2. 删除⽆⽤代码则是借助 terser-webpackplugin，这需要 mode: ‘production 才会被启⽤

3.Tree-Shaking 并不是银弹

Tree-Shaking 的局限性：

• 必须遵循 ES6 Modules 规范，如果使⽤ cjs 规范则⽆法使⽤ Tree-Shaking 功能。
• Tree-Shaking 只能处理顶层内容。⽐如类和对象内部都不会再被处理，这也是由于 JavaScript 动态语⾔特性导致的。(引⼊了⼀个 Class，只⽤了⾥⾯的某⼏个⽅法，其它⼏个没有被使⽤的⽅法 TreeShaking 不能把它⼲掉)
• 副作⽤(Side Effect)代码。

副作⽤这个概念来源于函数式编程(FP)。

纯函数是没有副作⽤的，也不依赖外界环境或者改变外界环境。纯函数的定义是：对于相同的输⼊就有相同的输出，不依赖外部环境，也不改变外部环境（接受相同的输⼊，任何情况下输出都是⼀样的）。符合上⾯描述的函数就可以称为纯函数，不符合就是不纯的，不纯就具有副作⽤的，是可能对外界造成影响的。
例⼦：
// 函数内调⽤外部⽅法

import { isNumber } from 'lodash-es'
export function foo(obj) {
return isNumber(obj) }
// 直接使⽤全局对象
function goto(url) {
location.href = url
}
// 直接修改原型
Array.prototype.hello = () => 'hello'

上⾯⼏种⽅式的代码都是有副作⽤的代码。
在 webpack 中因为不知道代码的内部做了什么，所
以不会被 Tree-Shaking 删除。
如何解决副作⽤：

1. 代码消除副作⽤
2. 配置 sideEffects 告诉 webpack 模块是安全的，
   不会带有副作⽤，可以放⼼优化

代码消除副作⽤

// 函数内调⽤外部⽅法
export function foo(isNumber, obj) {
return isNumber(obj) }
// 直接使⽤全局对象
function goto(location, url) {
location.href = url
}
配置 sideEffects
在 package.json 中使⽤ sideEffects 来配置哪些
⽂件中的代码具有副作⽤。从⽽对没有副作⽤的⽂
件代码使⽤ Tree-Shaking 进⾏优化。
// package.json
{
//…
“sideEffects”: [“./src/utils.js”] }
如果项⽬是个类库或者⼯具库，需要发布给其他项⽬使⽤，并且项⽬是使⽤ ES6 Modules 编写的，没有副作⽤，那么可以在该项⽬ package.json 设置sideEffects:false 来告诉使⽤该项⽬的 webpack 可以放⼼的对该项⽬进⾏ Tree-Shaking，⽽不必考虑副作⽤。

4.Tree-Shaking 与开发习惯

• 要使⽤ Tree-Shaking 必然要保证引⽤的模块都是ES6 规范的，很多⼯具库或者类库都提供了 ES6 语法的库，例如 lodash 的 ES6 版本是lodash-es
• 需引⼊模块，避免「⼀把梭」，例如我们要使⽤lodash 的 isNumber，可以使⽤ import isNumber from ‘lodash-es/isNumber’，⽽不是 import {isNumber} from ‘lodash-es’
• 减少代码中的副作⽤代码
• 
  

另外⼀些组件库，例如 AntDesign 和 ElementUI 这些组件库，本⾝⾃⼰开发了 Babel 的插件，通过插件的⽅式来按需引⼊模块，避免引⼊全部组件。

———————————————————- 旧 ————————————————————

对 tree-shaking 的了解

• 虽然生产模式下默认开启，但是由于经过 babel 编译全部模块被封装成 IIFE （Immediately Invoked Function Expression：声明即执行的函数表达式）
• IIFE 存在副作用无法被 tree-shaking 掉
• 需要配置 { module: false } 和 sideEffects: false
• Tree-shaking 和传统的 DCE的方法又不太一样，传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注宇消除没有用到的代码。
• rollup 和 webpack 的 shaking 程度不同，以一个 Class 为例子

Tree Shaking将没有使用的模块或者是模块中没有用到某个方法摇掉，这样来达到删除无用代码的目的。这个称为DEC。

传统的DEC，编译器可以判断出某些代码根本不影响输出，然后消除这些代码。

tree-shaking是利用代码压缩工具uglify完成了javascript的DCE（dead code elimination）。

• 使用：
  • webpack 默认支持，在 .babelrc 里设置 modules: false 即可
  • production mode的情况下默认开启
• 要求：
  • 必须是 ES6 的语法，CJS 的方式不支持
  • 需要tree shaking的模块代码是没有副作用的，否则tree shaking会失效
• 副作用这个概念来源于函数式编程(FP)，纯函数是没有副作用的，也不依赖外界环境或者改变外界环境。纯函数的概念是：接受相同的输入，任何情况下输出都是一样的。
• 非纯函数存在副作用，副作用就是：相同的输入，输出不一定相同。或者这个函数会影响到外部变量、外部环境。

原理

简单来说一段js代码的执行过程，需要经历以下三个步骤:

• V8通过源码进行词法分析，语法分析生成AST和执行上下文。
• 根据AST生成计算机可执行的字节码。
• 执行生成的字节码。

在JS的执行过程中，ES Module在第一步时就可以确认对应的依赖关系(编译阶段),并不需要执行就可以确认模块的导入、导出。
ES Module在js编译阶段就可以确定模块之间的依赖关系(import)以及模块的导出(export)，所以我们并不需要代码执行就可以根据ESM确定模块之间的规则从而实现Tree Shaking，我们称之为静态分析特性。
同理，对比commonjs模块，它依赖于代码的执行，需要在第三阶段执行完成代码之后才能确认模块的依赖关系。
自然也就不支持Tree Shaking。
关于ES Module中的动态引入dynamic import，因为它同样是动态需要js执行后才能确认的模块关系。自然也就无法支持Tree Shaking。

利用es6语法import静态导入的特点，有提升的作用，可以通过静态分析，确定模块的依赖关系，然后利用代码压缩工具uglify删除无用代码。

Tree Shaking 依赖ES6 的模块化语法，因为 ES6 模块化语法是静态的，可以进行静态分析。

ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。

所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化。

使用：

实例分析

1.配置@babel/preset-env

@babel/preset-env是存在一个modules的配置参数，它的默认值是auto的时候进行了Tree Shaking。也可以在用 babel-preset-env时需要将它的modules配置为false，也可以开启摇树。

babel首先处理js文件，真正进行tree-shaking识别和记录的是webpack本身。删除多于代码是在uglify中执行的

babel的配置文件中有一个preset配置项：

 presets: [
        [
            '@babel/preset-env',
            {
                modules: false,
            },
        ],
        [
            "@babel/preset-react",
        ],
    ],

presets里面的env的options中有一个 modules: false，这是指示babel如何去处理import和exports等关键字，默认处理成require形式。如果加上此option，那么babel就不会吧import形式，转变成require形式。为webpack进行tree-shaking创造了条件。

2.关闭 optimization

webpack 在生产模式下才会开启摇树，所以需要把 mode 设置为 production。

由上一节的摇树机制我们得知，我们需要把 webpack 的代码压缩器关闭才能看到 webpack 对代码使用情况的标注，所以需要关闭 webpack 的 optimization。

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    optimization: {
        minimize: false,
        concatenateModules: false
    },
    devtool: false
}

util.js

export function usedFunction() {
    return 'usedFunction'
}
export function unusedFunction() {
    return 'unusedFunction'
}

index.js

import {
    usedFunction,
    unusedFunction
} from './util'
let result1 = usedFunction()
// let result2 = unusedFunction()
console.log(result1)

打包结果 bundle.js 主要部分（果然看到了 webpack 对代码使用情况额标注）

/************************************************************************/
/******/
([
    /* 0 */
    /***/
    (function(module, __webpack_exports__, __webpack_require__) {
        "use strict";
        /* harmony export (binding) */
        __webpack_require__.d(__webpack_exports__, "a", function() {
            return usedFunction;
        });
        /* unused harmony export unusedFunction */
        function usedFunction() {
            return 'usedFunction'
        }
        function unusedFunction() {
            return 'unusedFunction'
        }
        /***/
    }),
    /* 1 */
    /***/
    (function(module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        /* harmony import */
        var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
        let result1 = Object(_util__WEBPACK_IMPORTED_MODULE_0__[ /* usedFunction */ "a"])()
        // let result2 = unusedFunction()
        console.log(result1)
        /***/
    })
    /******/
]);

显然：webpack 负责对代码进行标记，把 import & export 标记为 3 类：

• 被使用过的 export 标记为 **/* harmony export ([type]) */** ，其中 [type] 和 webpack 内部有关，可能是 binding、immutable 等等；
• 没被使用过的 export 标记为 **/* unused harmony export [FuncName] */** ，其中 [FuncName] 是 export 的方法名称；
• 所有 import 标记为 **/ harmony import /**

3.开启 optimization

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    optimization: {
        minimize: true,
        concatenateModules: true
    },
    devtool: false
}

打包结果

! function(e) {
    var t = {};
    function n(r) {
        if (t[r]) return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return e[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports
    }
    n.m = e, n.c = t, n.d = function(e, t, r) {
        n.o(e, t) || Object.defineProperty(e, t, {
            enumerable: !0,
            get: r
        })
    }, n.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, n.t = function(e, t) {
        if (1 & t && (e = n(e)), 8 & t) return e;
        if (4 & t && "object" == typeof e && e && e.__esModule) return e;
        var r = Object.create(null);
        if (n.r(r), Object.defineProperty(r, "default", {
                enumerable: !0,
                value: e
            }), 2 & t && "string" != typeof e)
            for (var o in e) n.d(r, o, function(t) {
                return e[t]
            }.bind(null, o));
        return r
    }, n.n = function(e) {
        var t = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return n.d(t, "a", t), t
    }, n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, n.p = "", n(n.s = 0)
}([function(e, t, n) {
    "use strict";
    n.r(t);
    console.log("usedFunction")
}]);

显然，会在代码标注的基础上进行代码精简，把没用的都删除。

实例分析总结

webpack 摇树分两步走：

1. 标注代码使用情况
2. 对未使用的代码进行删除

源码分析

代码静态分析，标注代码使用情况

通过搜索 webpack 源码，包含 harmony export 的部分，发现对 used export 和 unused export 的标注具体实现：

lib/dependencies/HarmoneyExportInitFragment.js

class HarmonyExportInitFragment extends InitFragment {
    /**
     * @param {string} exportsArgument the exports identifier
     * @param {Map<string, string>} exportMap mapping from used name to exposed variable name
     * @param {Set<string>} unusedExports list of unused export names
     */
    constructor(
        exportsArgument,
        exportMap = EMPTY_MAP,
        unusedExports = EMPTY_SET
    ) {
        super(undefined, InitFragment.STAGE_HARMONY_EXPORTS, 1, "harmony-exports");
        this.exportsArgument = exportsArgument;
        this.exportMap = exportMap;
        this.unusedExports = unusedExports;
    }
    merge(other) {
        let exportMap;
        if (this.exportMap.size === 0) {
            exportMap = other.exportMap;
        } else if (other.exportMap.size === 0) {
            exportMap = this.exportMap;
        } else {
            exportMap = new Map(other.exportMap);
            for (const [key, value] of this.exportMap) {
                if (!exportMap.has(key)) exportMap.set(key, value);
            }
        }
        let unusedExports;
        if (this.unusedExports.size === 0) {
            unusedExports = other.unusedExports;
        } else if (other.unusedExports.size === 0) {
            unusedExports = this.unusedExports;
        } else {
            unusedExports = new Set(other.unusedExports);
            for (const value of this.unusedExports) {
                unusedExports.add(value);
            }
        }
        return new HarmonyExportInitFragment(
            this.exportsArgument,
            exportMap,
            unusedExports
        );
    }
    /**
     * @param {GenerateContext} generateContext context for generate
     * @returns {string|Source} the source code that will be included as initialization code
     */
    getContent({
        runtimeTemplate,
        runtimeRequirements
    }) {
        runtimeRequirements.add(RuntimeGlobals.exports);
        runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
        const unusedPart =
            this.unusedExports.size > 1 ?
            `/* unused harmony exports ${joinIterableWithComma(
                        this.unusedExports
                  )} */\n` :
            this.unusedExports.size > 0 ?
            `/* unused harmony export ${
                        this.unusedExports.values().next().value
                  } */\n` :
            "";
        const definitions = [];
        for (const [key, value] of this.exportMap) {
            definitions.push(
                `\n/* harmony export */   ${JSON.stringify(
                    key
                )}: ${runtimeTemplate.returningFunction(value)}`
            );
        }
        const definePart =
            this.exportMap.size > 0 ?
            `/* harmony export */ ${RuntimeGlobals.definePropertyGetters}(${
                        this.exportsArgument
                  }, {${definitions.join(",")}\n/* harmony export */ });\n` :
            "";
        return `${definePart}${unusedPart}` ;
    }
}

harmoney export

getContent 处理 exportMap，对原来的 export 进行 replace

        const definePart =
            this.exportMap.size > 0 ?
            `/* harmony export */ ${RuntimeGlobals.definePropertyGetters}(${
                        this.exportsArgument
                  }, {${definitions.join(",")}\n/* harmony export */ });\n` :
            "";
        return `${definePart}${unusedPart}` ;
        }

unused harmoney exports

getContent 处理 unExportMap，对原来的 export 进行 replace

        const unusedPart =
            this.unusedExports.size > 1 ?
            `/* unused harmony exports ${joinIterableWithComma(
                        this.unusedExports
                  )} */\n` :
            this.unusedExports.size > 0 ?
            `/* unused harmony export ${
                        this.unusedExports.values().next().value
                  } */\n` :
            "";