webpack处理cmd和esm规范

1. cmd 引用 cmd

// login.js
module.exports = 'login'

// index.js
let name = require('./login.js')
console.log('index.js内容执行了')
console.log(name)

// 生成的模块定义
{
    "./src/index.js":
      /*! no static exports found */
      (function (module, exports, __webpack_require__) {
        let name = __webpack_require__(/*! ./login.js */ "./src/login.js")
        console.log('index.js内容执行了')
        console.log(name)
      }),
    "./src/login.js":
      /*! no static exports found */
      (function (module, exports) {
        module.exports = 'login'
      })
  }

2. cmd 引用 esm

// login.js
export default 'jerry'
export const age = 18

// index.js
let obj = require('./login.js')
console.log('index.js内容执行了')
console.log(obj.default, '---->', obj.age)

// 生成的模块定义
{
    "./src/index.js":
      (function (module, exports, __webpack_require__) {
        let obj = __webpack_require__(/*! ./login.js */ "./src/login.js")
        console.log('index.js内容执行了')
        console.log(obj.default, '---->', obj.age)

      }),
    "./src/login.js":
      (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        __webpack_require__.d(__webpack_exports__, "age", function () { return age; });
        __webpack_exports__["default"] = ('jerry');
        const age = 18
      })
  }

3. esm 引用 esm

// login.js
export default 'jerry'
export const age = 100

// index.js
let obj = require('./login.js')
console.log('index.js内容执行了')
console.log(obj.default, '---->', obj.age)

// 生成的模块定义
{
    "./src/index.js":
      (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        var _login_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./login.js */ "./src/login.js");
        console.log('index.js内容加载了')
        console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["default"], '---->', _login_js__WEBPACK_IMPORTED_MODULE_0__["age"])
      }),
    "./src/login.js":
      (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        __webpack_require__.d(__webpack_exports__, "age", function () { return age; });
        __webpack_exports__["default"] = ('jerry');
        const age = 100
      })
  }

4. esm 引用 cms

// login.js
module.exports = 'zce'

{
 "./src/index.js":
 (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    var _login_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./login.js */ "./src/login.js");
    var _login_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_login_js__WEBPACK_IMPORTED_MODULE_0__);

    console.log('index.js内容加载了')
    console.log(_login_js__WEBPACK_IMPORTED_MODULE_0___default.a)

  }),
 "./src/login.js":
 (function(module, exports) {
    module.exports = 'zce'
 })
}