深入理解 webpack 文件打包机制(小结)(10)

日期：2020-05-11 栏目：程序人生 浏览：次

运行 npm run build:hoist 进行编译，简单看下生成的 pageB 代码：

webpackJsonp([2],{
 2: (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
 var utilA = __webpack_require__(0);
 // CONCATENATED MODULE: ./src/hoist/utilB.js
 const utilB = 'util B';
 function funcB() {
  console.log('func B');
 }
 // CONCATENATED MODULE: ./src/hoist/pageB.js
 funcB();
 __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, 3)).then(function(utilC) {
  console.log(utilC);
 })
 })
},[2]);

通过代码分析，可以得出下面的结论：

  1. 因为我们配置了共享模块抽离，所以 utilA 被抽出为单独模块，故这部分内容不会进行作用域提升。
  2. utilB 无牵无挂，被 pageB 单独加载，所以这部分不会生成新的模块，而是直接作用域提升到 pageB 中。
  3. utilC 被异步加载，需要抽离成单独模块，很明显没办法作用域提升。

结尾

好了，讲到这差不多就完了，理解上面的内容对前端模块化会有更多的认知，如果有什么写的不对或者不完整的地方，还望补充说明，希望这篇文章能帮助到你。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。