Webpack之模块加载

Webpack之模块加载

webpack作为前端打包工具受到大多数的前端开发者的青睐，在使用webpack的过程我们通过webpack自带的模块化功能实现了项目代码的模块化，方便了我们管理和维护，那么webpack是怎么实现各个模块之间的划分和加载的呢？

模块划分

在了解模块加载之前，我们需要首先看下webpack是怎么将一个个文件划分为模块的。我们有一个入口文件index.js以及模块a.js、b.js，代码如下

// index.js
import A from './a.js'
function hello () {
   
    console.log(A)
}
hello()
export default hello

// a.js
export default {
   
    a: 'a'
}
// b.js
export const B = function () {
   
    console.log('B')
}

在经过了webpack的各种编译之后，会产生一个bundle.js的文件，我们来看下里面的大体结构。

(function(modules){
   
  ......
  ......
  var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
  var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  jsonpArray.push = webpackJsonpCallback;
  jsonpArray = jsonpArray.slice();
  for(var i = 0; i < jsonpArray.length; i++)    
    webpackJsonpCallback(jsonpArray[i]);
  var parentJsonpFunction = oldJsonpFunction;
  return __webpack_require__(__webpack_require__.s = "./src/main.js");
})(
 {
   
   "./src/a.js": (function(module, __webpack_exports__, __webpack_require__){
   
       .......
       .......
   }),
   "./src/main.js": (function(module, __webpack_exports__, __webpack_require__){
   
       .......
       .......
   })
 }
)

我们可以看到webpack最终打包出来的文件其实一个立即执行函数，函数的参数是一个modules对象。webpack将一个文件作为一个模块，用文件的相对路径来作为module的key，把文件的内容用一个闭包包裹作为module的值。将modules传入上面的函数之后，执行到return webpack_require(webpack_require.s = “./src/main.js”); 部分，加载我们的入口文件main.js。所以我们可以看出webpack进行模块加载的关键就是__webpack_require__函数了。

模块加载

webpack_require