Question

我想了解：

Webpack如何将JavaScript模块编译并“打包”成最终的捆绑包（它使用哪种JavaScript模式）？即，一个模块中的代码如何访问同一捆绑包中另一个模块中的代码（假设捆绑之前，该代码是使用import语句来导入和使用“其他”代码）？
一个捆绑软件中的代码是否可以在不使用全局变量的情况下访问另一个捆绑软件中的代码？
如果我们正在使用代码拆分，并且两个捆绑包使用相同的代码（例如第三方npm模块），那么两个捆绑包中都将包含这个模块吗？

更新：我查看了Webpack的官方文档，发现Webpack的简化实现名为Minipack。我编写了以下代码来测试其工作原理：

constants.js

export const testVar = 'some value';

app.js

import { testVar } from './constants.js';

const copiedVar = testVar;

这是Minipack为上述代码创建的捆绑包：

(function (modules) {
    function require(id) {
        const [fn, mapping] = modules[id];
        function localRequire(name) {
            return require(mapping[name]);
        }
        const module = { exports: {} };
        fn(localRequire, module, module.exports);
        return module.exports;
    }
    require(0);
})({
    0: [
        function (require, module, exports) {
            "use strict";

            var _constants = require("./constants.js");

            var copiedVar = _constants.testVar;
        },
        { "./constants.js": 1 },
    ], 1: [
        function (require, module, exports) {
            "use strict";

            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            var testVar = exports.testVar = 'some value';
        },
        {},
    ],
})

我知道每个JS模块都作用于一个函数，并且整个捆绑包基本上都是IIFE。但是我无法真正理解整个过程以及它到底是如何工作的。谁能详细解释软件包输出（逐步）？

Webpack如何捆绑模块？

0 个答案: