成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Webpack模塊化原理簡(jiǎn)析

tracy / 2276人閱讀

摘要：模塊化原理簡(jiǎn)析的核心原理一切皆模塊在中，，靜態(tài)資源文件等都可以視作模塊便于管理，利于重復(fù)利用按需加載進(jìn)行代碼分割，實(shí)現(xiàn)按需加載。模塊化原理以為例，分析構(gòu)建的模塊化方式。

webpack模塊化原理簡(jiǎn)析 
1.webpack的核心原理

一切皆模塊：在webpack中，css,html.js，靜態(tài)資源文件等都可以視作模塊；便于管理，利于重復(fù)利用；

按需加載：進(jìn)行代碼分割，實(shí)現(xiàn)按需加載。

2. webpack模塊化原理：以js為例，分析webpack構(gòu)建common.js的模塊化方式。

①構(gòu)建示例代碼

//b.js
let b =3
export ;

//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.整體結(jié)構(gòu)：整個(gè)bundle.js整個(gè)是一個(gè)執(zhí)行函數(shù)，傳進(jìn)去的參數(shù)是一個(gè)個(gè)的模塊，也是一個(gè)的函數(shù)，通過(guò)函數(shù)的作用于達(dá)到模塊化的效果。

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

b.模塊初始化

 //1.定義一個(gè)模塊緩存的容器
var installedModules = {};

//2.webpack的require實(shí)現(xiàn)
function __webpack_require__(moduleId) {//傳參是模塊ID

 //3.判斷模塊是否緩存，若是緩存了就不用加載，直接返還這個(gè)已緩存的模塊
 if(installedModules[moduleId]) {
     return installedModules[moduleId].exports;}
     
 // 4.若是沒(méi)有被緩存，則緩存這個(gè)模塊
 var module = installedModules[moduleId] = {
     i: moduleId, //模塊ID
     l: false,    //標(biāo)識(shí)模塊是否加載
     exports: {}
 };

 //5.執(zhí)行模塊函數(shù)，modules代表一系列的模塊函數(shù)，要?jiǎng)討B(tài)綁定module.exports，綁定this；可以交叉連續(xù)引用。     
 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 // 6.標(biāo)記模塊已經(jīng)被加載
 module.l = true;

 // 7.返回該模塊的exports
 return module.exports;}
 
 //8.require第一個(gè) 模塊
 return __webpack_require__(0);
}

c.模塊函數(shù)

 //a.js模塊
 function(module, exports, __webpack_require__) {
  "use strict";
   var b = __webpack_require__(1);//重復(fù)調(diào)用
   var a = b + 123;}
   
 //b.js模塊
 function(module, exports, __webpack_require__) {
   "use strict";
   var b = 3;
   exports.b = b;}

d.下面是執(zhí)行的流程圖，指定一個(gè)初始模塊，所有被引用的模塊會(huì)響應(yīng)的循環(huán)加載。

ps幾個(gè)小問(wèn)題

1.在模塊加載的時(shí)候，最后傳遞的一個(gè)參數(shù)是__webpack_require__，是全局定義的函數(shù)，為什么是全局的呢，因?yàn)樽詧?zhí)行函數(shù)的this指向全局。

2.commond.js需要注意模塊導(dǎo)出的問(wèn)題

①exports不能直接賦值，無(wú)用，因?yàn)樵创a中返回的是module.exports；

②可以在exports上增加屬性，比如exports.fn=；這樣module.exports會(huì)變化，最終導(dǎo)出的是module.exports也會(huì)變化；

//node.js部分源碼，node也是通過(guò)閉包實(shí)現(xiàn)模塊的隔離
(function(exports,module,require,__dirname,__filename){
       this = module.exports  //this是指向module.exports的
       module.exports = exports = {}
return module.exports})()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84461.html

相關(guān)文章

  • Loader學(xué)習(xí)，簡(jiǎn)析babel-loader

    摘要：用來(lái)轉(zhuǎn)換內(nèi)容，內(nèi)部調(diào)用了方法進(jìn)行轉(zhuǎn)換，這里簡(jiǎn)單介紹一下的原理將代碼解析成，對(duì)進(jìn)行轉(zhuǎn)譯，得到新的，新的通過(guò)轉(zhuǎn)換成，核心方法在中的方法，有興趣可以去了解一下。將函數(shù)傳入?yún)?shù)和歸并，得到。通常我們是用不上的，估計(jì)在某些中可能會(huì)使用到。 什么是Loader? 繼上兩篇文章webpack工作原理介紹（上篇、下篇）,我們了解到Loader：模塊轉(zhuǎn)換器，也就是將模塊的內(nèi)容按照需求裝換成新內(nèi)容，而且每...

    wpw 評(píng)論0 收藏0

  • Webpack Loader簡(jiǎn)析（一）：基本概念

    摘要：需要得到最后一個(gè)產(chǎn)生的處理結(jié)果。這個(gè)處理結(jié)果應(yīng)該是或者被轉(zhuǎn)換為一個(gè)，代表了模塊的源碼。另外還可以傳遞一個(gè)可選的結(jié)果格式為對(duì)象。在異步模式中，必須調(diào)用，來(lái)指示等待異步結(jié)果，它會(huì)返回回調(diào)函數(shù)，隨后必須返回并且調(diào)用該回調(diào)函數(shù)。 準(zhǔn)備工作 安裝 Node.js, 建議安裝LTS長(zhǎng)期支持版本 mkdir webpack and cd webpack and npm init -y npm ...

    sherlock221 評(píng)論0 收藏0

  • 有價(jià)值的前端技術(shù)點(diǎn)

    摘要：借著產(chǎn)品層面的功能和視覺(jué)升級(jí)，我們用對(duì)它進(jìn)行了一次技術(shù)重構(gòu)。前端優(yōu)化是一個(gè)讓人技術(shù)提升的，希望你也能從這里學(xué)到一些東西。年最流行的前端鏈接我們每周會(huì)給多名前端開(kāi)發(fā)者發(fā)送新聞郵件。 面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門(mén)檻越來(lái)越高，很多開(kāi)發(fā)者對(duì)于網(wǎng)絡(luò)知識(shí)這塊了解的不是很多，遇到這些面試題會(huì)手足無(wú)措。本篇文章知識(shí)主要集中在 HTTP 這塊。文中知識(shí)來(lái)自 《圖解 HTTP》與維基百科，若有錯(cuò)...

    microelec 評(píng)論0 收藏0

  • Weex系列(4) —— 老生常談的三端統(tǒng)一

    摘要：剛看到這仨頁(yè)面的時(shí)候，我就想著可以用路由，做成三端統(tǒng)一。樣式這部分真的三端基本是高度統(tǒng)一的，部分微調(diào)一下就可以了，也正是這樣，我們后續(xù)才能迅速解決和。終于不是談?wù)勅私y(tǒng)一了，也是真的體驗(yàn)了一次，雖然最后有點(diǎn)出入，但是下次基本是沒(méi)問(wèn)題了。 目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(...

    wzyplus 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<