大佬教程收集整理的这篇文章主要介绍了深入理解webpack打包机制,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一、单入口文件如何打包
/src/single/index.js
/src/single/index2.js
/src/single/util.js
/config/webpack.config.single.js
运行webpack命令
title="深入理解webpack打包机制" alt="深入理解webpack打包机制" src="https://cn.js-code.com/res/2019/01-14/23/26e72868612d37425f1db7fd804cbe3c.png" >
得到的单个打包文件/dist/index.35dff1f1.js
</span><span style="color: #008000">//</span><span style="color: #008000"> The require function模块加载函数</span>
<span style="color: #000000"> function __webpack_require__(modulEID) {
</span><span style="color: #008000">//</span><span style="color: #008000"> check if module is in cache判断模块是否已经加载过,若加载过直接返回加载的模块</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedModules[modulEID]) {
</span><span style="color: #0000ff">return</span><span style="color: #000000"> installedModules[modulEID].exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> Create a new module (and put it into the cachE)</span>
<span style="color: #0000ff">var</span> module = installedModules[modulEID] =<span style="color: #000000"> {
i: modulEID,l: </span><span style="color: #0000ff">false</span><span style="color: #000000">,exports: {}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Execute the module function执行加载函数</span>
<span style="color: #000000"> modules[modulEID].call(module.exports,module,module.exports,__webpack_require__);
</span><span style="color: #008000">//</span><span style="color: #008000"> Flag the module as loaded标记该模块已经加载</span>
module.l = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> Return the exports of the module</span>
<span style="color: #0000ff">return</span><span style="color: #000000"> module.exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the modules object (__webpack_modules__)</span>
__webpack_require__.m =<span style="color: #000000"> modules;
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the module cache</span>
__webpack_require__.c =<span style="color: #000000"> installedModules;
</span><span style="color: #008000">//</span><span style="color: #008000"> define getter function for harmony exports</span>
__webpack_require__.d =<span style="color: #000000"> function(exports,name,getter) {
</span><span style="color: #0000ff">if</span>(!<span style="color: #000000">__webpack_require__.o(exports,Name)) {
Object.defineProperty(exports,{
configurable: </span><span style="color: #0000ff">false</span><span style="color: #000000">,enumerable: </span><span style="color: #0000ff">true</span><span style="color: #000000">,</span><span style="color: #0000ff">get</span><span style="color: #000000">: getter
});
}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> getDefaultExport function for compatibility with non-harmony modules</span>
__webpack_require__.n =<span style="color: #000000"> function(modulE) {
</span><span style="color: #0000ff">var</span> getter = module && module.__esModule ?<span style="color: #000000">
function getDefault() { </span><span style="color: #0000ff">return</span> module[<span style="color: #800000">'</span><span style="color: #800000">default</span><span style="color: #800000">'</span><span style="color: #000000">]; } :
function getModuleExports() { </span><span style="color: #0000ff">return</span><span style="color: #000000"> module; };
__webpack_require__.d(getter,</span><span style="color: #800000">'</span><span style="color: #800000">a</span><span style="color: #800000">'</span><span style="color: #000000">,getter);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> getter;
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Object.prototype.hasOwnProperty.call</span>
__webpack_require__.o = function(<span style="color: #0000ff">object</span>,property) { <span style="color: #0000ff">return</span> Object.prototype.hasOwnProperty.call(<span style="color: #0000ff">object</span><span style="color: #000000">,property); };
</span><span style="color: #008000">//</span><span style="color: #008000"> __webpack_public_path__</span>
__webpack_require__.p = <span style="color: #800000">""</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> Load entry module and return exports</span>
<span style="color: #0000ff">return</span> __webpack_require__(__webpack_require__.s = <span style="color: #800080">1</span><span style="color: #000000">);
})([
}),<span style="color: #008000">/<span style="color: #008000"> 1 <span style="color: #008000">/<span style="color: #000000">
(function(module,exports,__webpack_require__) {
}),<span style="color: #008000">/<span style="color: #008000"> 2 <span style="color: #008000">/<span style="color: #000000">
(function(module,__webpack_require__) {
<span style="color: #0000ff">var index2 = webpack_require(<span style="color: #800080">3<span style="color: #000000">);
<span style="color: #0000ff">var util = webpack_require(<span style="color: #800080">0<span style="color: #000000">);
console.log(index2);
console.log(util);
}),<span style="color: #008000">/<span style="color: #008000"> 3 <span style="color: #008000">/<span style="color: #000000">
(function(module,__webpack_require__) {
<span style="color: #0000ff">var util = __webpack_require__(<span style="color: #800080">0<span style="color: #000000">);
console.log(util);
module.exports = <span style="color: #800000">"<span style="color: #800000">index 2<span style="color: #800000">"<span style="color: #000000">;
}) ]);
__webpack_require__
模块加载,先判断 installedModules 是否已加载,加载过了就直接返回 exports 数据,没有加载过该模块就通过@H_73_99@modules[modulEID].call(module.exports,__webpack_require__)执行模块并且将 module.exports 给返回。上述过程还是比较简单的,但有些点需要注意:
1、每个模块只会加载一次,所以重复加载的模块只会执行一次,加载过的模块会放到 installedModules,下次需要需要该模块的值就直接从里面拿了。
2、模块的id 直接通过数组下标去一一对应的,这样能保证简单且唯一,通过其它方式比如文件名或文件路径的方式就比较麻烦,因为文件名可能出现重名,不唯一,文件路径则会增大文件体积,并且将路径暴露给前端,不够安全。
3、modules[@H_73_99@modulEID].call(module.exports,__webpack_require__)保证了模块加载时 this 的指向 module.exports 并且传入默认参数
二、多入口文件如何进行代码切割
我们在开发一些较复杂的应用时,如果没有对代码进行切割,将第三方库(jQuery)或框架(React) 和业务代码全部打包在一起,就会导致用户访问页面速度很慢,不能有效利用缓存。
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilA.js 可类比于公共库,如 jQuery
module.exports = <span style="color: #800000">"<span style="color: #800000">util A<span style="color: #800000">"<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilB.js
module.exports = <span style="color: #800000">'<span style="color: #800000">util B<span style="color: #800000">'<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilC.js
module.exports = <span style="color: #800000">"<span style="color: #800000">util C<span style="color: #800000">";
这里我们定义了两个入口 pageA 和 pageB 和三个库 util,我们希望代码切割做到:
那么 webpack 需要怎么配置呢?
单单配置多 entry 是不够的,这样只会生成两个 bundle 文件,将 pageA 和 pageB 所需要的内容全部放入,跟单入口文件并没有区别,要做到代码切割,我们需要借助 webpack 内置的插件 CommonsChunkPlugin。
首先 webpack 执行存在一部分运行时代码,即一部分初始化的工作,就像之前单文件中的__webpack_require__
,这部分代码需要加载于所有文件之前,相当于初始化工作,少了这部分初始化代码,后面加载过来的代码就无法识别并工作了。
这段代码的含义是,在这些入口文件中,找到那些引用两次的模块(如:utilB),帮我抽离成一个叫 vendor 文件,此时那部分初始化工作的代码会被抽离到 vendor 文件中。
这段代码的含义是在 vendor 文件中帮我把初始化代码抽离到 mainifest 文件中,此时 vendor 文件中就只剩下 utilB 这个模块了。你可能会好奇为什么要这么做?
因为这样可以给 vendor 生成稳定的 hash 值,每次修改业务代码(pageA),这段初始化时代码就会发生变化,那么如果将这段初始化代码放在 vendor 文件中的话,每次都会生成新的 vendor.xxxx.js,这样不利于持久化缓存
另外 webpack 默认会抽离异步加载的代码,这个不需要你做额外的配置,pageB 中异步加载的 utilC 文件会直接抽离为 chunk.xxxx.js 文件。
所以这时候我们页面加载文件的顺序就会变成:
执行命令
title="深入理解webpack打包机制" alt="深入理解webpack打包机制" src="https://cn.js-code.com/res/2019/01-14/23/b16115e46d3adb86c90ad8cf7aeb267f.png" >
结果生成了5个文件:异步加载文件utilC.js单独打包成了一个文件0.×××.js,入口pageA,pageB分别打包成文件,pageA和pageB共用模块单独打包成vendor,初始化代码manifest
那么manifest如何做初始化工作呢?
</span><span style="color: #008000">//</span><span style="color: #008000"> The module cache</span>
<span style="color: #0000ff">var</span> installedModules =<span style="color: #000000"> {};
</span><span style="color: #008000">//</span><span style="color: #008000"> objects to store loaded and loading chunks</span>
<span style="color: #0000ff">var</span> installedChunks =<span style="color: #000000"> {
</span><span style="color: #800080">4</span>: <span style="color: #800080">0</span><span style="color: #000000">
};
</span><span style="color: #008000">//</span><span style="color: #008000"> The require function模块加载函数</span>
<span style="color: #000000"> function __webpack_require__(modulEID) {
</span><span style="color: #008000">//</span><span style="color: #008000"> check if module is in cache</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedModules[modulEID]) {
</span><span style="color: #0000ff">return</span><span style="color: #000000"> installedModules[modulEID].exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> Create a new module (and put it into the cachE)</span>
<span style="color: #0000ff">var</span> module = installedModules[modulEID] =<span style="color: #000000"> {
i: modulEID,exports: {}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Execute the module function</span>
<span style="color: #000000"> modules[modulEID].call(module.exports,__webpack_require__);
</span><span style="color: #008000">//</span><span style="color: #008000"> Flag the module as loaded</span>
module.l = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> Return the exports of the module</span>
<span style="color: #0000ff">return</span><span style="color: #000000"> module.exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> This file contains only the entry chunk.
</span><span style="color: #008000">//</span><span style="color: #008000"> The chunk loading function for additional chunks</span>
__webpack_require__.e =<span style="color: #000000"> function requireEnsure(chunkId) {
</span><span style="color: #0000ff">var</span> installedChunkData =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(installedChunkData === <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolvE) { resolve(); });
}
</span><span style="color: #008000">//</span><span style="color: #008000"> a Promise means "currently loading".</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedChunkData) {
</span><span style="color: #0000ff">return</span> installedChunkData[<span style="color: #800080">2</span><span style="color: #000000">];
}
</span><span style="color: #008000">//</span><span style="color: #008000"> setup Promise in chunk cache</span>
<span style="color: #0000ff">var</span> promise = <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolve,reject) {
installedChunkData </span>= installedChunks[chunkId] =<span style="color: #000000"> [resolve,reject];
});
installedChunkData[</span><span style="color: #800080">2</span>] =<span style="color: #000000"> promise;
</span><span style="color: #008000">//</span><span style="color: #008000"> start chunk loading</span>
<span style="color: #0000ff">var</span> head = document.getElementsByTagName(<span style="color: #800000">'</span><span style="color: #800000">head</span><span style="color: #800000">'</span>)[<span style="color: #800080">0</span><span style="color: #000000">];
</span><span style="color: #0000ff">var</span> script = document.createElement(<span style="color: #800000">'</span><span style="color: #800000">script</span><span style="color: #800000">'</span><span style="color: #000000">);
script.type </span>= <span style="color: #800000">"</span><span style="color: #800000">text/javascript</span><span style="color: #800000">"</span><span style="color: #000000">;
script.charset </span>= <span style="color: #800000">'</span><span style="color: #800000">utf-8</span><span style="color: #800000">'</span><span style="color: #000000">;
script.</span><span style="color: #0000ff">async</span> = <span style="color: #0000ff">true</span><span style="color: #000000">;
script.timeout </span>= <span style="color: #800080">120000</span><span style="color: #000000">;
</span><span style="color: #0000ff">if</span><span style="color: #000000"> (__webpack_require__.nC) {
script.setAttribute(</span><span style="color: #800000">"</span><span style="color: #800000">nonce</span><span style="color: #800000">"</span><span style="color: #000000">,__webpack_require__.nc);
}
script.src </span>= __webpack_require__.p + <span style="color: #800000">""</span> + chunkId + <span style="color: #800000">"</span><span style="color: #800000">.</span><span style="color: #800000">"</span> + {<span style="color: #800000">"</span><span style="color: #800000">0</span><span style="color: #800000">"</span>:<span style="color: #800000">"</span><span style="color: #800000">ae9c5f5f</span><span style="color: #800000">"</span>}[chunkId] + <span style="color: #800000">"</span><span style="color: #800000">.js</span><span style="color: #800000">"</span><span style="color: #000000">;
</span><span style="color: #0000ff">var</span> timeout = setTimeout(onScriptComplete,<span style="color: #800080">120000</span><span style="color: #000000">);
script.onerror </span>= script.onload =<span style="color: #000000"> onScriptComplete;
function onScriptComplete() {
</span><span style="color: #008000">//</span><span style="color: #008000"> avoid mem leaks in IE.</span>
script.onerror = script.onload = <span style="color: #0000ff">null</span><span style="color: #000000">;
clearTimeout(timeout);
</span><span style="color: #0000ff">var</span> chunk =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(chunk !== <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">if</span><span style="color: #000000">(chunk) {
chunk[</span><span style="color: #800080">1</span>](<span style="color: #0000ff">new</span> Error(<span style="color: #800000">'</span><span style="color: #800000">Loading chunk </span><span style="color: #800000">'</span> + chunkId + <span style="color: #800000">'</span><span style="color: #800000"> failed.</span><span style="color: #800000">'</span><span style="color: #000000">));
}
installedChunks[chunkId] </span>=<span style="color: #000000"> undefined;
}
};
head.appendChild(script);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> promise;
};
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the modules object (__webpack_modules__)</span>
__webpack_require__.m =<span style="color: #000000"> modules;
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the module cache</span>
__webpack_require__.c =<span style="color: #000000"> installedModules;
</span><span style="color: #008000">//</span><span style="color: #008000"> define getter function for harmony exports</span>
__webpack_require__.d =<span style="color: #000000"> function(exports,</span><span style="color: #0000ff">get</span><span style="color: #000000">: getter
});
}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> getDefaultExport function for compatibility with non-harmony modules</span>
__webpack_require__.n =<span style="color: #000000"> function(modulE) {
</span><span style="color: #0000ff">var</span> getter = module && module.__esModule ?<span style="color: #000000">
function getDefault() { </span><span style="color: #0000ff">return</span> module[<span style="color: #800000">'</span><span style="color: #800000">default</span><span style="color: #800000">'</span><span style="color: #000000">]; } :
function getModuleExports() { </span><span style="color: #0000ff">return</span><span style="color: #000000"> module; };
__webpack_require__.d(getter,getter);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> getter;
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Object.prototype.hasOwnProperty.call</span>
__webpack_require__.o = function(<span style="color: #0000ff">object</span>,property); };
</span><span style="color: #008000">//</span><span style="color: #008000"> __webpack_public_path__</span>
__webpack_require__.p = <span style="color: #800000">""</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> on error function for async loading</span>
__webpack_require__.oe = function(err) { console.error(err); <span style="color: #0000ff">throw</span><span style="color: #000000"> err; };
})([]);
与单文件内容一致,定义了一个自执行函数,因为它不包含任何模块,所以传入一个空数组。除了定义了__webpack_require__
,还另外定义了两个函数用来进行加载模块。
首先讲解代码前需要理解两个概念,分别是 module 和 chunk
__webpack_require__
加载的模块,同样的使用数组下标作为 modulEID 且是唯一不重复的。
那么为什么要区分 chunk 和 module 呢?
首先使用 installedChunks 来保存每个 chunkId 是否被加载过,如果被加载过,则说明该 chunk 中所包含的模块已经被放到了 modules 中,注意是 modules 而不是 installedModules。我们先来简单看一下 vendor chunk 打包出来的内容。
})
]);
在执行完 manifest 后就会先执行 vendor 文件,结合上面 webpackJsonp 的定义,我们可以知道 [3] 代表 chunkId,当加载到 vendor 文件后,installedChunks[3] 将会被置为 0,这表明 chunk3 已经被加载过了。
webpack如何加载异步脚本:
</span><span style="color: #008000">//</span><span style="color: #008000"> a Promise means "currently loading".</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedChunkData) {
</span><span style="color: #0000ff">return</span> installedChunkData[<span style="color: #800080">2</span><span style="color: #000000">];
}
</span><span style="color: #008000">//</span><span style="color: #008000"> setup Promise in chunk cache</span>
<span style="color: #0000ff">var</span> promise = <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolve,<span style="color: #800080">120000</span><span style="color: #000000">);
script.onerror </span>= script.onload =<span style="color: #000000"> onScriptComplete;
function onScriptComplete() {
</span><span style="color: #008000">//</span><span style="color: #008000"> avoid mem leaks in IE.</span>
script.onerror = script.onload = <span style="color: #0000ff">null</span><span style="color: #000000">;
clearTimeout(timeout);
</span><span style="color: #0000ff">var</span> chunk =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(chunk !== <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">if</span><span style="color: #000000">(chunk) {
chunk[</span><span style="color: #800080">1</span>](<span style="color: #0000ff">new</span> Error(<span style="color: #800000">'</span><span style="color: #800000">Loading chunk </span><span style="color: #800000">'</span> + chunkId + <span style="color: #800000">'</span><span style="color: #800000"> failed.</span><span style="color: #800000">'</span><span style="color: #000000">));
}
installedChunks[chunkId] </span>=<span style="color: #000000"> undefined;
}
};
head.appendChild(script);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> promise;
};</span></pre>
大致分为三种情况,(已经加载过,正在加载中以及从未加载过)
通过 utilC 生成的 chunk 来进行讲解:
pageB需要异步加载这个chunk:
当 pageB 进行某种操作需要加载 utilC 时就会执行__webpack_require__.e(0,callback),
0,代表需要加载的模块 chunkId(utilC),异步加载 utilC 并将 callback 添加到 installedChunks[0] 中,然后当 utilC 的 chunk 文件加载完毕后,chunkIds 包含 1,发现 installedChunks[0] 是个数组,里面还有之前还未执行的 callback 函数
既然这样,那我就将我自己带来的模块先放到 modules 中,然后再统一执行之前未执行完的 callbacks 函数,这里指的是存放于 installedChunks[1] 中的回调函数 (可能存在多个),这也就是说明这里的先后顺序:
webpack2 中会默认加载 OccurrenceOrderPlugin 这个插件,即你不用 plugins 中添加这个配置它也会默认执行,那它有什么用途呢?主要是在 webpack1 中 moduleId 的不确定性导致的,在 webpack1 中 moduleId 取决于引入文件的顺序,这就会导致这个 moduleId 可能会时常发生变化,而 OccurrenceOrderPlugin 插件会按引入次数最多的模块进行排序,引入次数的模块的 moduleId 越小,比如说上面引用的 utilB 模块引用次数为 2(最多),所以它的 moduleId 为 0。
最后说下在异步加载模块时, webpack2 是基于 Promise 的,所以说如果你要兼容低版本浏览器,需要引入Promise-polyfill
,另外为引入请求添加了错误处理。
在 webpack1 的时候,如果由于网络原因当你加载脚本失败后,即使网络恢复了,你再次进行某种操作需要同个 chunk 时候都会无效,主要原因是失败之后没把installedChunks[chunkId] = undefined;
导致之后不会再对该 chunk 文件发起异步请求。
而在 webpack2 中,当脚本请求超时了(2min)或者加载失败,会将 installedChunks[chunkId] 清空,当下次重新请求该 chunk 文件会重新加载,提高了页面的容错性
三、webpack2如何做到tree shaking?
什么是 tree shaking,即 webpack 在打包的过程中会将没用的代码进行清除(dead code)。一般 dead code 具有一下的特征:
是不是很神奇,那么需要怎么做才能使 tree shaking 生效呢?
首先,模块引入要基于 ES6 模块机制,不再使用 commonjs 规范,因为 es6 模块的依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析,然后清除没用的代码。而 commonjs 的依赖关系是要到运行时候才能确定下来的。
其次,需要开启 UglifyJsPlugin 这个插件对代码进行压缩。
我们先写一个例子来说明:
<span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilC.js
<span style="color: #0000ff">const classC = function() {} <span style="color: #008000">//<span style="color: #008000"> 类方法不会被清除
classC.prototype.saySomething =<span style="color: #000000"> function() {
console.log(<span style="color: #800000">'<span style="color: #800000">class C<span style="color: #800000">'<span style="color: #000000">);
}
export <span style="color: #0000ff">default classC;
打包的配置也很简单:
对压缩的文件进行分析:
引入但是没用的变量,函数都会清除,未执行的代码也会被清除。但是类方法是不会被清除的。因为 webpack 不会区分不了是定义在 classC 的 prototype 还是其它 Array 的 prototype 的,比如 classC 写成下面这样:
webpack 无法保证 prototype 挂载的对象是 classC,这种代码,静态分析是分析不了的,就算能静态分析代码,想要正确完全的分析也比较困难。所以 webpack 干脆不处理类方法,不对类方法进行 tree shaking
四、webpack3如何做到scope hoisTing?
scope hoisTing,顾名思义就是将模块的作用域提升,在 webpack 中不能将所有所有的模块直接放在同一个作用域下,有以下几个原因:
在 webpack3 中,这些情况生成的模块不会进行作用域提升,下面我就举个例子来说明:
<span style="color: #008000">//<span style="color: #008000"> src/hoist/utilC.js
export <span style="color: #0000ff">const utilC = <span style="color: #800000">'<span style="color: #800000">util C<span style="color: #800000">'<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> src/hoist/pageA.js
import { utilA,funcA } <span style="color: #0000ff">from <span style="color: #800000">'<span style="color: #800000">./utilA<span style="color: #800000">'<span style="color: #000000">;
console.log(utilA);
funcA();
<span style="color: #008000">//<span style="color: #008000"> src/hoist/pageB.js
import { utilA } <span style="color: #0000ff">from <span style="color: #800000">'<span style="color: #800000">./utilA<span style="color: #800000">'<span style="color: #000000">;
import { utilB,funcB } <span style="color: #0000ff">from <span style="color: #800000">'<span style="color: #800000">./utilB<span style="color: #800000">'<span style="color: #000000">;
funcB();
import(<span style="color: #800000">'<span style="color: #800000">./utilC<span style="color: #800000">'<span style="color: #000000">).then(function(utilC) {
console.log(utilC);
})
这个例子比较典型,utilA 被 pageA 和 pageB 所共享,utilB 被 pageB 单独加载,utilC 被 pageB 异步加载。
想要 webpack3 生效,则需要在 plugins 中添加 ModuleConcatenationPlugin。
webpack 配置如下:
运行进行编译,简单看下生成的 pageB 代码:
通过代码分析,可以得出下面的结论:
转自:https://github.com/happylindz/blog/issues/6
以上是大佬教程为你收集整理的深入理解webpack打包机制全部内容,希望文章能够帮你解决深入理解webpack打包机制所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。