Webpack模块化道理简析

2019年8月25日 199次阅读 来源: 何凯

webpack模块化道理简析

1.webpack的中心道理

  • 统统皆模块：在webpack中，css,html.js，静态资本文件等都能够视作模块；便于管理，利于反复应用；

  • 按需加载：举行代码支解，完成按需加载。

2. webpack模块化道理：以js为例，剖析webpack构建common.js的模块化体式格局。

    • ①构建示例代码

      //b.js
let b =3
export {b};

//a.js
let b = require('./b.js')
let  a = b+123;

//webpack.config.js
let path = require("path")
module.exports = {
  entry: './a.js',
  output: {
      filename: 'bundle.js',
     path: path.resolve(__dirname, 'build')},
 module: {
    loaders: [{
     test: /\.js$/,
     loader: 'babel-loader',
     query: {
              presets: ['es2015']}}}}

    • ②剖析bundle.js

      • a.团体构造：全部bundle.js全部是一个实行函数，传进去的参数是一个个的模块，也是一个的函数，经由过程函数的作用于到达模块化的结果。

        (function (modules) {………………})([  //模块初始化
  function (module, exports, __webpack_require__) {
    /* 模块a.js的代码 */},  
  function (module, exports, __webpack_require__) {
    /* 模块b.js的代码 */}]);

      • b.模块初始化

         //1.定义一个模块缓存的容器
var installedModules = {};

//2.webpack的require完成
function __webpack_require__(moduleId) {//传参是模块ID

 //3.推断模块是不是缓存，如果缓存了就不必加载，直接返还这个已缓存的模块
 if(installedModules[moduleId]) {
     return installedModules[moduleId].exports;}
     
 // 4.如果没有被缓存，则缓存这个模块
 var module = installedModules[moduleId] = {
     i: moduleId, //模块ID
     l: false,    //标识模块是不是加载
     exports: {}
 };

 //5.实行模块函数，modules代表一系列的模块函数，要动态绑定module.exports，绑定this；能够交织一连援用。     
 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 // 6.标记模块已被加载
 module.l = true;

 // 7.返回该模块的exports
 return module.exports;}
 
 //8.require第一个 模块
 return __webpack_require__(0);
}

      • c.模块函数

         //a.js模块
 function(module, exports, __webpack_require__) {
  "use strict";
   var b = __webpack_require__(1);//反复挪用
   var a = b + 123;}
   
 //b.js模块
 function(module, exports, __webpack_require__) {
   "use strict";
   var b = 3;
   exports.b = b;}

      • d.下面是实行的流程图，指定一个初始模块，一切被援用的模块会相应的轮回加载。

        《Webpack模块化道理简析》

    • ps几个小题目

      • 1.在模块加载的时刻，末了通报的一个参数是__webpack_require__，是全局定义的函数，为何是全局的呢，由于自实行函数的this指向全局。

      • 2.commond.js须要注重模块导出的题目

        • ①exports不能直接赋值，无用，由于源码中返回的是module.exports；

        • ②能够在exports上增添属性，比方exports.fn=；如许module.exports会变化，终究导出的是module.exports也会变化；

          //node.js部份源码，node也是经由过程闭包完成模块的断绝
(function(exports,module,require,__dirname,__filename){
       this = module.exports  //this是指向module.exports的
       module.exports = exports = {}
return module.exports})()
        原文作者：何凯
        原文地址: https://segmentfault.com/a/1190000010409465
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞