前言

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) {                            // 代码主体                        },    })复制代码

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