第淺談Webpack是如何打包CommonJS的目錄一、書寫代碼二、使用webpack打包編譯三、解析CommonJS是Node中的一種模塊化規(guī)范，其是一種運(yùn)行在Node環(huán)境下的代碼，這種代碼是不能直接運(yùn)行到瀏覽器環(huán)境中的。但是在日常使用webpack的項(xiàng)目中不用做額外的處理，我們也能使用CommonJS來書寫代碼，那么webpack在這背后做了什么呢？

我們這里不看編譯時(shí)，只看運(yùn)行時(shí)

一、書寫代碼

使用yarninit-y命令初始化一個(gè)package.json文件。接著yarnaddwebpack安裝一下webpack。目錄下創(chuàng)建一個(gè)index.js內(nèi)容如下：

constsum=require('./sum')

console.log(sum(1,2))

sum.js文件內(nèi)容如下：

module.exports=(...args)=args.reduce((x,y)=x+y,0)

二、使用webpack打包編譯

這里不想寫webpack的配置文件然后再通過webpack-cli來打包，就直接寫一個(gè)打包的文件。

//build.js

constwebpack=require('webpack')

functionf1(){

returnwebpack({

entry:'./index.js',

mode:'none',

output:{

iife:false,

pathinfo:'verbose'//verbose:冗余；盡可能的詳細(xì)

f1().run((err,stat)={

console.log('打包')

接著在終端跑一下這個(gè)文件

nodebuild.js

如果成功的話就會(huì)出來一個(gè)dist目錄，里面有個(gè)main.js總共就是50行代碼，其中大部分都是注釋，代碼如下

var__webpack_modules__=([

/*0*/,

/*1*/

/*!****************!*\

!***./sum.js***!

\****************/

/*!unknownexports(runtime-defined)*/

/*!runtimerequirements:module*/

/*!CommonJSbailout:module.exportsisuseddirectlyat1:0-14*/

((module)={

module.exports=(...args)=args.reduce((x,y)=x+y,0)

/************************************************************************/

//Themodulecache

var__webpack_module_cache__={};

//Therequirefunction

function__webpack_require__(moduleId){

//Checkifmoduleisincache

varcachedModule=__webpack_module_cache__[moduleId];

if(cachedModule!==undefined){

returncachedModule.exports;

//Createanewmodule(andputitintothecache)

varmodule=__webpack_module_cache__[moduleId]={

//nomodule.idneeded

//nomodule.loadedneeded

exports:{}

//Executethemodulefunction

__webpack_modules__[moduleId](module,module.exports,__webpack_require__);

//Returntheexportsofthemodule

returnmodule.exports;

/************************************************************************/

var__webpack_exports__={};

//ThisentryneedtobewrappedinanIIFEbecauseitneedtobeisolatedagainstothermodulesinthechunk.

(()={

/*!******************!*\

!***./index.js***!

\******************/

/*!unknownexports(runtime-defined)*/

/*!runtimerequirements:__webpack_require__*/

constsum=__webpack_require__(/*!./sum*/1)

console.log(sum(1,2))

})();

三、解析

我們?cè)侔汛a精簡(jiǎn)一下，并加上注釋

//存放的模塊，是一個(gè)數(shù)組

const__webpack_modules__=[

((module)={

//sum.js中的內(nèi)容

module.exports=(...args)=args.reduce((x,y)=x+y,0)

//模塊緩存（也就是說如果模塊已經(jīng)被引用過了就直接從這兒拿）

const__webpack_module_cache__={}

//moduleId為__webpack_modules__的下標(biāo)

function__webpack_require__(moduleId){

//如果能從緩存里面拿到，則直接返回

constcachedModule=__webpack_module_cache__[moduleId]

if(cachedModule!==undefined)returncachedModule.exports

//緩存內(nèi)拿不到，則創(chuàng)建一個(gè)對(duì)象同時(shí)內(nèi)部包含一個(gè)exports對(duì)象并存入到緩存內(nèi)

constmodule=__webpack_module_cache__[moduleId]={

exports:{}

//接著通過執(zhí)行__webpack_modules__中的moduleId對(duì)應(yīng)函數(shù)并傳入module對(duì)象

//通過函數(shù)內(nèi)賦值module.exports獲得sum函數(shù)

__webpack_modules__[moduleId](module,module.exports,__webpack_require__)

//最后返回module中的exports對(duì)象

returnmodule.exports

(()={

//index.js中的內(nèi)容

constsum=__webpack_require__(1)

console.log(sum(1,2))

})();

我們通過注釋配合來解析一下

首先執(zhí)行立即執(zhí)行函數(shù)（L32）中的__webpack_require__函數(shù)，并傳入moduleId為1在__webpack_require__函數(shù)中嘗試在__webpack_module_cache__中獲取moduleId為1的模塊（L16）在__webpack_module_cache__中獲取失敗之后創(chuàng)建一個(gè)object，同時(shí)內(nèi)部有屬性exports={}，并同時(shí)將其賦值給__webpack_module_cache__[moduleId]（L20）執(zhí)行對(duì)應(yīng)的moduleId的函數(shù)__webpack_modules