关闭

Webpack模块化原理图解

时间: 2021-02-02阅读: 192标签: Webpack

为什么需要模块化

场景1

A同学开发了模块a,B同学开发了模块b,在页面下通过如下方式进行引用

<script src="a.js"></script>
<script src="b.js"></script>

这时模块a,模板b中的代码都暴露在全局环境中,如果模块a中定义了一个方法del。同学b并不知道,在模块b中也定义了一个方法del。这时便造成了命名冲突的的问题。如图


场景2

C同学开发了一个公共的工具库utils.js,D同学开发了一个公共的组件tab.js,tab.js依赖utils.js。同学E需要使用D同学开发的tab.js,就需要通过如下方式引用

<script src="util.js"></script>
<script src="tab.js"></script>

同学E自己也开发了一个dailog.js同时它也依赖util.js。现在页面同时引用了dialog.js和tab.js,代码如下

<script src="util.js"></script>
<script src="dialog.js"></script>
<scrpt src="tab.js"></script>

同学E不仅需要同时引用这三个js文件,还必须保证文件之间的引用顺序是正确的。同时,从上面的代码我们无法直接看出模块与模块之间的依赖关系,如果不深入tab.js,我们无法知道tab.js到底是只依赖util.js还是dialog.js或者两者都依赖。随着项目逐渐增大,不同模块之间的依赖关系则会变的越来越难以维护也会导致许多模块中大量的变量都暴露在全局环境中。


模块化的几种实现方案

模块化的规范有很多种, 如下
| 规范 | 实现方案 |
| --- | --- |
| CommonJS | node.js |
| AMD | Require.js |
| CMD | Sea.js
| UMD | |
| ES6 Module | |

webpack支持CommonJS,AMD,ESModule等多种模块化方式的语法


webpack的模块化原理

在webpack中,一切皆模块。下面我们通过webpack来打包以下代码。通过对打包代码的解析,来一步一步的了解模块化的实现原理。

目录结构如下:


代码如下:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: 'a.js',
  output: {
    path: path.resolve(__dirname, "dist"),
          filename: "[name].js"
    },
    resolve: {
          modules: [path.resolve(__dirname)]
    },
    optimization: {
          minimize: false
    }
}
// a.js
var b = require('b');

module.exports = b.text + ' world';
// b.js
exports.text = 'hello';

在simple目录下执行webpack命令,会在simple目录下生成dist/output.js文件。

// outout.js
// 代码及注释如下

(() => {
  // 所有导入的模块都存储在__webpack_modules__对象中,并且每个模块都要一个标识该模块的id
  var __webpack_modules__ = ({
     847: ((module, __unsed_webpack_exports, __webpack_require__) => {
        // 模块a...
     }),
     996: ((__unused_webpack_module, exports) => {
       // 模块b...
     })
  })
  
  var __webpack_module_cache__ = {};

  function __webpack_require__(moduleId) {
      // 检查缓存中不存在847导出对象,防止模块847多次执行
     if (__webpack_module_cache__[moduleId]) {
        // 从缓存中返回847导出对象
        return __webpack_module_cache__[moduleId].exports;
     }
     
     // 1.创建{exports: {}}对象
     // 2.像缓存中添加该对象,并让该对象与模块id 847相关联
     var module = __webpack_module_cache__[moduleId] = {
       exports: {}
     }
     
     // 3.通过__webpack_modules__查询模块847
     // 4.执行模块847并传入刚刚创建的模块847的导出对象module,以及module.exports等
     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
     
     // 5.返回模块847的导出对象
     return module.exports;
  }
  
  // 导入模块847
  __webpack_require__(847);
})()

如上代码我们可以知道,所有的的模块都存储在__webpack_modules__对象中,模块的导出对象则存储在__webpack_module_cache__对象中,我们定义的模块都可以通过传入moduleId来调用__webpack_require__接口来访问该模块以及该模块的导出对象。

当我们通过__webpack_require__接口访问模块847的导出对象时。会先判断__webpack_module_cache__对象中有没有该模块的导出对象,如果有的话,则直接返回。如果没有的话则会

(1)创建模块847的导出对象

var module = {
  exports: {}
}

(2)将该导出对象添加到__webpack_module_cache__对象中

__webpack_module_cahce__[moduleId] = module

(3)(4)通过__webpack_modules__查询模块847并执行

// 传入模块847的导出对象,以及require接口
__webpack_modules__[moduleId](module, module.exports, __webpack_require__)

(5)返回模块847的导出对象

return module.exports

图解如下:


橘黄色背景的元素代表数据

绿色背景的元素代表函数


总结

通过模块化的管理方式

每个模块都通过函数封装在自己的局部环境中。 模块与模块之间通过require 接口进行通信。且不用通过暴露在全局环境。

每个模块都明确通过require接口传入依赖的模块,所以模块与模块之间的依赖关系也是非常明了的。如图

a -> b -> c -> d


模块第1次被引用时,调用require接口会像cache中添加导出对象。并返回添加的导出对象。

模块被第2+次引用时,调用require接口查询cache对象时,返回cache中对应的导出对象


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10144

Webpack知识点

Webpack从基础概念到项目配置,涉及知识点较多,现将学习使用过程中遇到内容记录下来,方便以后速查。Webpack是一个模块打包工具,在Webpack里一切文件皆模块。通过loader转换文件,通过plugin注入钩子

webpack output

output输出口必须是个对象,因为它必须有两个属性:filename输出出去的文件的名字,一般都是bundle.js,path文件要输出出去到哪里,一般都是dist文件,那如果我们是多页面引用,那上面这个输出就不行了

webpack3升级为webpack4的实践

之前尝试过一些在webpack3的基础上做的构建优化,例如引入HappyPack优化构建速度,开启loader缓存和优化包查找路径等等,详情可以查看前端webpack构建优化

Webpack如何实现一个Loader?

loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或\\\"加载\\\"模块时预处理文件,loader是一个node模块,编写loader时要遵循单一原则,每个loader只做一种\\\"转义\\\"工作

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack重要知识点

为了使用tree shaking,需要满足以下条件:使用ES2015语法(即import和export),在项目package.json文件中,添加sideEffects入口,引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如:UglifyJSPlugin)

webpack中如何使用noParser和 parser

因为 Webpack 是以模块化的 JavaScript 文件为入口的,所以内置了对模块化 JavaScript的解析功能,支持 AMO, Cornmo nJS SystemJS ES6 parser 属性可以更细粒度地配置哪些模块语法被解析、哪些不被解析。同 noParse 配置项的区别在于

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!