webpack中 import 与 require的区别

前言

前段时间写了一篇文章import 与 require 详解 - 从深入浅处Node带来的思考，该文章得出import是基于require实现的，并且在不同的环境中实现是不同的，于是乎本片文章旨在从源码来分析在webpack的环境下import与require究竟有何区别。

环境：

• webpack：^4.35.3
• webpack-cli： ^3.3.5

webpack打包之后的代码结构

以下为webpack代码的结构

(function(modules){
    var installedModules = {}; //模块缓存
    
    function __webpack_require__(){ //加载函数
        ...
    }
    
    ... //__webpack_require__方法上的其他属性声明
    
    return __webpack_require__(__webpack_require__.s = "value of entry path"); //打包文件的入口地址，使用__webpack_require__方法来加载代码
})({
   "entry module name":function(module, __webpack_exports__, __webpack_require__){
        ... //入口模块编译之后的代码
   },
   "import|require module name":function(module, __webpack_exports__, __webpack_require__){
        ... //入口模块中引入的其他模块编译之后的代码
   },
   ...
})

webpack会将入口文件作为起始点，采用深度优先的方式逐一执行代码中引入(import|require)的文件，如果所引入的文件是ES6模块，则webpack使用__webpack_require__.r(module.exports)来打上标记，以标识该模块是ES6模块，从而执行一些特殊处理, 示例代码：

//Es6 模块
{
    "./module-es6.js":(function(module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);//Es6模块标识
        
        /****** ES6 export的变量 ******/
        __webpack_require__.d(__webpack_exports__, "moduleValue", function() { return moduleValue; });
        var moduleValue = "moduleValue";
        /****** ES6 export的变量 ******/
        
        __webpack_exports__["default"] = ("ModuleDefaultValue");//default属性赋值
    })
}

如果所引入的文件是CommonJs模块，则将出口对象赋值给exports对象, 然后default属性则会使用var default = __webpack_require__.n(exports);的方式赋值，示例代码如下：

//CommonJs 模块
{
    "./module-commonjs.js":(function(module, exports){
        exports.moduleValue1 = "moduleValue1";
        exports.moduleValue2 = "moduleValue2";
    })
}

从上述代码可知require与import的主要区别如下：

1. 如果是import的Es6模块则会使用__webpack_require__.r()方法来标记Es模块。
2. Es6模块的default属性使用__webpack_exports__["default"] = {...}的方式赋值，而CommonJs模块则使用var default = __webpack_require__.n(exports);的方式赋值(这会导致exports与default的值一样)。
3. Es6模块导出值使用export方式导出，由于浏览器不识别export，因此其会被webpack转化成__webpack_require__.d(exports, name, getter)，绑定getter到exports上来导出值。而CommonJs模块则是直接使用exports对象将值导出。

参考文档

1. 解析 Webpack中import、require、按需加载的执行过程
2. webpack官方文档

如有错误，还望斧正。