webpack是如何实现前端模块化的

前言

es6 module是js语言原生的模块化方案，但是由于浏览器的兼容问题，需要webpack对我们写好的模块代码进行处理，可以让浏览器识别我们写的模块代码。

因为浏览器端是没有commonJS规范相关的module,exports,require变量，而且该规范是同步加载模块的，所以浏览器端不适用commonJs规范类型的模块化。

webpack通过模拟module，exports，require变量，将我们的模块代码打包成一个文件，让浏览器可以运行我们的模块代码。

那webpack是如何处理我们的模块代码的呢？

import * as _ from 'loadsh';

module.exports = {
    name: 'jack',
    age: 12
};复制代码

webpack会将上面的这个模块代码用一个函数包装起来：

function(module, exports, require) { // 包装函数
    const _ = require('loadsh');
    module.exports = {
        name: 'jack',
        age: 12
    }
}复制代码

那最终webpack是怎么将所有模块化代码打包到一个文件中，让浏览器可以运行呢？

(function(modules) { // modules就是我们的模块代码集合，格式类似于{ 'module1': module1对应的模块代码包装函数 }
    function require(name) { // webpack模拟的require变量
        const module = { exports: {} }; // webpack模拟的module，exports变量
        // require的作用就是在执行的时候将事先定义好的module，exports，require变量传入当前模块对应
            的包装函数并且运行。
        modules[name].call(module, module, module.exports, require);
        return module.exports; // module.exports变量被传入包装函数运行之后赋值。
    };
    require('入口文件');
})(
    // 参数就是模块代码被包装之后的集合
    {
        '模块代码1路径': function(module, exports, require) {
                            // 代码主体
                        },
       '模块代码2路径': function(module, exports, require) {
                            // 代码主体
                        },    }
)复制代码

这样讲所有模块代码打包到一个文件中，浏览器一次性将所有资源加载到内存中，变向实现了浏览器端的模块化。