webpack 模块化的原理

通过实例来说明webpack 模块化的原理

1、company.js文件：

export default {

        company:'lexin'

};

2、lotus.js文件：

import company from './company';

export default {

        name:'greenlotus'

        age : 28

};

console.log(company);

3、webpack.config.js文件

const path = require('path');

module.exports = {

        entry: './lotus.js',

        output: {

                path: path.resolve(__dirname, 'dist'),

                filename: 'bundle.js',

        }

};

4、webpack 编译后的精简代码

(function(modules) {

        function __webpack_require__(moduleId) {

                var module = {

                        i: moduleId,

                        l: false,

                        exports: {}

                };

                modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

                return module.exports;

        }

        return __webpack_require__(0);

})([

        (function(module, __webpack_exports__, __webpack_require__) {

                "use strict";

                //__esModule 表明这是个由 es6 转换来的commonjs规范输出

                Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

                //引入依赖的模块（也就是'import company from './company'）

                var __WEBPACK_IMPORTED_MODULE_0__company__ = __webpack_require__(1);

                //lotus.js default export

                __webpack_exports__["default"] = ({

                        name:'greenlotus'

                        age : 28

                });

                //输出company对象

                console.log(__WEBPACK_IMPORTED_MODULE_0__company__["company"]);

        }),

        (function(module, __webpack_exports__, __webpack_require__) {

                "use strict";

                //company.js default export

                __webpack_exports__["company"] = ({company:'lexin'});

        })

]);

实例重点讲解：

1、通过上面代码发现，入口是一个自执行函数：(function(modules){ ... })([arg1,arg2,...]);

2、arg1代表入口文件lotus.js 实例化函数、arg2就是依赖的company.js实例化函数

3、代码主要函数：__webpack_require__，它所做的就是定义module对象 , 然后调用arg1、arg2 实例化module.exports对象，最后返回 module.exports。