Webpack模块化原理简析

tracy 发布于2019-08-20 18:24 / 2414人阅读

摘要：模块化原理简析的核心原理一切皆模块在中，，静态资源文件等都可以视作模块便于管理，利于重复利用按需加载进行代码分割，实现按需加载。模块化原理以为例，分析构建的模块化方式。

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.下面是执行的流程图，指定一个初始模块，所有被引用的模块会响应的循环加载。

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://www.ucloud.cn/yun/84461.html

Loader学习，简析babel-loader

摘要：用来转换内容，内部调用了方法进行转换，这里简单介绍一下的原理将代码解析成，对进行转译，得到新的，新的通过转换成，核心方法在中的方法，有兴趣可以去了解一下。将函数传入参数和归并，得到。通常我们是用不上的，估计在某些中可能会使用到。什么是Loader? 继上两篇文章webpack工作原理介绍（上篇、下篇）,我们了解到Loader：模块转换器，也就是将模块的内容按照需求装换成新内容，而且每...

wpw 2019-08-26 13:35 评论0 收藏0
Webpack Loader简析（一）：基本概念

摘要：需要得到最后一个产生的处理结果。这个处理结果应该是或者被转换为一个，代表了模块的源码。另外还可以传递一个可选的结果格式为对象。在异步模式中，必须调用，来指示等待异步结果，它会返回回调函数，随后必须返回并且调用该回调函数。准备工作安装 Node.js, 建议安装LTS长期支持版本 mkdir webpack and cd webpack and npm init -y npm ...

sherlock221 2019-08-23 11:00 评论0 收藏0
有价值的前端技术点

摘要：借着产品层面的功能和视觉升级，我们用对它进行了一次技术重构。前端优化是一个让人技术提升的，希望你也能从这里学到一些东西。年最流行的前端链接我们每周会给多名前端开发者发送新闻邮件。面试 -- 网络 HTTP 现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自《图解 HTTP》与维基百科，若有错...

microelec 2019-08-26 11:32 评论0 收藏0
Weex系列(4) —— 老生常谈的三端统一

摘要：刚看到这仨页面的时候，我就想着可以用路由，做成三端统一。样式这部分真的三端基本是高度统一的，部分微调一下就可以了，也正是这样，我们后续才能迅速解决和。终于不是谈谈三端统一了，也是真的体验了一次，虽然最后有点出入，但是下次基本是没问题了。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...

wzyplus 2019-08-23 14:09 评论0 收藏0