webpack——使用、分析打包代码

世上本无nodejs

js最初是在前端浏览器上运行的语言，js代码一旦脱离了浏览器环境，就无法被运行。直到nodejs的出现，我们在电脑上配置了node环境，就可以让js代码脱离浏览器，在node环境中运行。

浏览器不支持模块化

nodejs

nodejs可其他后端语言一样，支持模块化，享受了模块化的优点。

浏览器环境

可是浏览器并不支持nodejs的模块化语法

代码

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./module1.js"></script>
</head>
<body>
    <div id="btn">我是一个标题</div>
</body>
</html>
//module1.js
const module2=require('./module2')
console.log('module2',module2)
//module2.js
const a=1
console.log('module2',a)
module.exports.a=a

 目录结构

效果

Uncaught ReferenceError: require is not defined  
[Five Server] connecting...
[Five Server] connected.

webpack使用

webpack.config.js配置

//webpack.config.js
const path=require("path")
module.exports={
    mode:'development',
    entry:"./module1.js",
    output:{
        path:path.join(__dirname,"dist"),
        filename:"bundle.js"
    }
}

运行结果

webpack打包代码

例一commonJs

模块代码

//module1.js
const module2=require('./module2')
console.log('module2',module2)

 

打包代码bundle.js

//打包代码稍作修正一（功能不改变）
(() => {

  var __webpack_modules__ = ({
    "./module1.js":
    (__unused_webpack_module, __unused_webpack_exports, __webpack_require__) =>{
      eval(`
          const module2=__webpack_require__("./module2.js");
          console.log('module2',module2.a)
      `);
    },
    "./module2.js":
    (module) =>{
      eval(`
          const a=1;console.log('module2',a);
          module.exports.a=a
      `);
    }
  });

  var __webpack_module_cache__ = {};

  function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    var module = __webpack_module_cache__[moduleId] = {
      exports: {}
    };
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    return module.exports;
  }

  var __webpack_exports__ = __webpack_require__("./module1.js");

 })();
//打包代码稍作修正二（功能不改变）
(function(){
  var cache = {};

  function require(modulePath) {
    // var cachedModule = cache[moduleId];
    // if (cachedModule !== undefined) {
    //   return cachedModule.exports;
    // }
    // var module = cache[moduleId] = {
    //   exports: {}
    // };
    module={
      exports:{}
    }
    modules[modulePath](module, module.exports, require);
    return module.exports;
  }

  var modules={
    ["./module1.js"](module, exports, require){
      eval(`
          const module2=require("./module2.js");
          console.log('module2',module2.a)
      `);
    },

    ["./module2.js"](module){
      eval(`
          const a=1;console.log('module2',a);
          module.exports.a=a
      `);
    }
  }

  var exports = require("./module1.js");
 })();

打包代码分析

①webpack实现了自己的require（）函数

②webpack采用了立即执行函数

③webpac把各个模块的代码放到modules中

④各模块代码字符串形式存储，使用eval()函数执行

例二commonJs+ES6

模块代码

//module1.js
const module2=require('./module2')
console.log('module1',module2.a)
//module2.js
const module3=require('./utils/modules3')
console.log('module2',module3.a)
module.exports.a=module3.a
//module3.js
export const a=1
console.log('module3',a)

打包代码 

//打包代码稍作修正（功能不改变）
(() => { 
	var modules = ({
    "./module1.js":
    ((module, exports, require) => {
        eval(`
          const module2=require("./module2.js");
          console.log('module1',module2.a)
        `);
    }),

    "./module2.js":
    ((module, exports, require) => {
        eval(`
            const module3=require('./utils/modules3.js');
            console.log('module2',module3.a);
            module.exports.a=module3.a
        `);
    }),

    "./utils/modules3.js":
    ((module, exports, require) => {
        "use strict";
        eval(`
              require.r(exports);
              require.d(exports, {"a":() => (a)});
              const a=1;
              console.log('module3',a)
        `);
    })
  });

	var _cache = {};
	
	function require(moduleId) {		
		var cachedModule = _cache[moduleId];
		if (cachedModule !== undefined) {
			return cachedModule.exports;
		}
		var module = _cache[moduleId] = {	
			exports: {}
		};
		modules[moduleId](module, module.exports, require);
		return module.exports;
	}

	(() => {
		require.d = (exports, definition) => {
			for(var key in definition) {
				if(require.o(definition, key) && !require.o(exports, key)) {
					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
				}
			}
		};
	})();
	
	(() => {
		require.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
	})();
	
	(() => {	
		require.r = (exports) => {
			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
			}
			Object.defineProperty(exports, '__esModule', { value: true });
      console.log(exports)
      // debugger
		};
	})();

	var exports = require("./module1.js");
})()
;

打包代码分析

较例一，require函数对象上添加了d、r、o三个函数，它们的功能分析。

解开debugger的注释，控制台打印出

Module {__esModule: true, Symbol(Symbol.toStringTag): 'Module'}
    __esModule: true
    Symbol(Symbol.toStringTag): "Module"
   [[Prototype]]: Object

分析r函数功能

r函数向exports对象添加__esModule、Symbol(Symbol.toStringTag)两个属性，来标注采用了ES6模块化

注释debugger，控制台打印出

分析d。r函数功能

d。r函数向exports对象添加a属性

例三ES6

模块代码

//module1.js
import {a} from './module2'
console.log('module1',a)
export const a=1
console.log('module2',a)

打包代码

(() => {
  "use strict";
  var modules = ({

    "./module1.js":
      ((module, exports, require) => {

        eval(`require.r(exports);
              var _module2__WEBPACK_IMPORTED_MODULE_0__ = require("./module2.js");
              console.log('module1',_module2__WEBPACK_IMPORTED_MODULE_0__.a)
        `);
      }),

    "./module2.js":

      ((module, exports, require) => {

        eval(`require.r(exports);
              require.d(exports, {"a": () => (a)});
              const a=1;
              console.log('module2',a)`);

      })

  });
  
  var cache = {};

  function require(moduleId) {
    var cachedModule = cache[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }

    var module = cache[moduleId] = {

      exports: {}
    };


    modules[moduleId](module, module.exports, require);


    return module.exports;
  }


  (() => {

    require.d = (exports, definition) => {
      for (var key in definition) {
        if (require.o(definition, key) && !require.o(exports, key)) {
          Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
        }
      }
    };
  })();


  (() => {
    require.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
  })();


  (() => {
    require.r = (exports) => {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      }
      Object.defineProperty(exports, '__esModule', { value: true });
    };
  })();
  var exports = require("./module1.js");

})()
  ;

代码分析

和上面的打包结果差不多。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/2719.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

STL—vector

STL—vector

vector介绍在C标准库中&#xff0c;vector是一个常用的序列式容器&#xff08;线性结构&#xff09;&#xff0c;它就好比c语言中的数组&#xff0c;但是vector有一些数组没有的功能&#xff0c;是一个封装好了的类。想要使用vector需要先引入头文件&#xff1a;#include<ve…
阅读更多...
【C陷阱与缺陷】----语法陷阱

【C陷阱与缺陷】----语法陷阱

&#x1f4af;&#x1f4af;&#x1f4af; 要理解一个C程序&#xff0c;必须理解这些程序是如何组成声明&#xff0c;表达式&#xff0c;语句的。虽然现在对C的语法定义很完善&#xff0c;几乎无懈可击&#xff0c;大门有时这些定义与人们的直觉相悖&#xff0c;或容易引起混淆…
阅读更多...
【机器学习】综述：机器学习中的模型评价、模型选择与算法选择

【机器学习】综述：机器学习中的模型评价、模型选择与算法选择

文章目录一、前言二、论文摘要三、简介&#xff1a;基本的模型评估项和技术3.1 性能评估&#xff1a;泛化性能 vs. 模型选择四、Bootstrapping 和不确定性五、交叉验证和超参数优化一、前言 最近在做实验的时候&#xff0c;发现树模型有过拟合的情况发生&#xff0c;为此&…
阅读更多...
蓝桥杯每日一真题—— [蓝桥杯 2021 省 AB2] 完全平方数（数论，质因数分解）

蓝桥杯每日一真题—— [蓝桥杯 2021 省 AB2] 完全平方数（数论，质因数分解）

文章目录[蓝桥杯 2021 省 AB2] 完全平方数题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1样例 #2样例输入 #2样例输出 #2提示思路&#xff1a;理论补充&#xff1a;完全平方数的一个性质&#xff1a;完全平方数的质因子的指数一定为偶数最终思路&#xff1a;小插曲&am…
阅读更多...
直面风口，未来不仅是中文版ChatGPT，还有AGI大时代在等着我们

直面风口，未来不仅是中文版ChatGPT，还有AGI大时代在等着我们

说到标题的AI2.0这个概念的研究早在2015年就研究起步了&#xff0c;其实大家早已知道&#xff0c;人工智能技术必然是未来科技发展战略中的重要一环&#xff0c;今天我们就从AI2.0入手&#xff0c;以GPT-4及文心一言的发布为切入角度&#xff0c;来谈一谈即将降临的AGI时代。 关…
阅读更多...
Linux搭建GitLab私有仓库，并内网穿透实现公网访问

Linux搭建GitLab私有仓库，并内网穿透实现公网访问

文章目录前言1. 下载Gitlab2. 安装Gitlab3. 启动Gitlab4. 安装cpolar5. 创建隧道配置访问地址6. 固定GitLab访问地址6.1 保留二级子域名6.2 配置二级子域名7. 测试访问二级子域名前言 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c…
阅读更多...
基于Springboot实现商务安全邮箱邮件收发 源码+论文展示

基于Springboot实现商务安全邮箱邮件收发 源码+论文展示

基于Springboot实现商务安全邮箱邮件收发 源码论文开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Ma…
阅读更多...
【多线程】定时器和线程池

【多线程】定时器和线程池

✨个人主页&#xff1a;bit me&#x1f447; ✨当前专栏&#xff1a;Java EE初阶&#x1f447; ✨每日一语&#xff1a;种一棵树最好的时间是十年前&#xff0c;其次是现在。 目 录⌚️一. 定时器&#x1f4c4;1. 定时器是什么&#x1f4c3;2. 标准库中的定时器&#x1f4d1;3.…
阅读更多...
【C语言初阶】初识C语言 | C语言知识预览

【C语言初阶】初识C语言 | C语言知识预览

文章目录&#x1f490;专栏导读&#x1f490;文章导读&#x1f337;什么是C语言&#xff1f;&#x1f337;第一个C语言程序&#x1f337;数据类型&#x1f337;变量、常量、字符串&#x1f33a;定义变量的方法&#x1f33a;变量的分类&#x1f33a;变量的使用&#x1f33a;变量…
阅读更多...
DJ2-5 DNS：Internet 的目录服务

DJ2-5 DNS：Internet 的目录服务

目录 1. DNS 简介 2. DNS 服务器提供的功能 3. 分布式、层次数据库 4. DNS 查询方法 5. DNS 缓存和权威 DNS 服务器记录更新 6. DNS 记录 7. DNS 报文 8. 在 DNS 数据库中插入记录 9. DNS 攻击 1. DNS 简介 名称&#xff1a;Domain Name System DNS 是&#xff1a; …
阅读更多...
vue面试题（day06）

vue面试题（day06）

文章目录前言请谈谈WXML与标准的html的异同&#xff1f;请谈谈WXSS和CSS的异同&#xff1f;请谈谈微信小程序主要目录和文件的作用&#xff1f;请谈谈小程序的双向绑定和vue的异同&#xff1f;简单描述下微信小程序的相关文件类型&#xff1f;微信小程序有哪些传值(传递数据)方…
阅读更多...
【新星计划2023】SQL SERVER (01) -- 基础知识

【新星计划2023】SQL SERVER (01) -- 基础知识

【新星计划2023】SQL SERVER -- 基础知识1. Introduction1.1 Official Website1.2 Conn Tool2. 基础命令2.1 建库建表2.2 Alter2.3 Drop2.3 Big Data -- Postgres3.Awakening1. Introduction 1.1 Official Website 官方文档&#xff08;小技巧&#xff09; Officail Website: …
阅读更多...
十个Python图像处理工具，不可不知

十个Python图像处理工具，不可不知

这些Python库提供了一种简单直观的方法来转换图像并理解底层数据。 今天的世界充满了数据&#xff0c;图像是这些数据的重要组成部分。但是&#xff0c;在使用它们之前&#xff0c;必须对这些数字图像进行处理 - 分析和操作&#xff0c;以提高其质量或提取一些可以使用的信息。…
阅读更多...
【C++学习】继承

【C++学习】继承

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; C是面向对象的编程语言&#xff0c;它有很多的特性&#xff0c;但是最重要的就是封装&#xff0c;继承…
阅读更多...
【3DoF算法】

【3DoF算法】

VR 3DoF算法介绍 核心&#xff1a;3DoF算法应用场景&#xff0c;在VIO应用中&#xff0c;当只有测量没有观测的情况下&#xff0c;6DoF算法的预测会退化成一个只有测量的3DoF算法&#xff0c;这时候需要使用3DoF算法&#xff0c;来更加稳定准确的获取3DoF位姿&#xff0c;直到…
阅读更多...
【VSCode】Windows 下搭建 Fortran 环境

【VSCode】Windows 下搭建 Fortran 环境

文章目录Part.I 预备知识Part.II 安装与配置Chap.I 编译环境Chap.II 插件Part.III 测试Chap.I 一个示例Chap.II 注意事项Part.I 预备知识 Fortran 是一种比较古老的语言了&#xff0c;当时作为一种科学计算工具&#xff0c;还是比较火的&#xff0c;因为很多有名的软件都是基于…
阅读更多...
LFM雷达实现及USRP验证【章节2:LFM雷达测距】

LFM雷达实现及USRP验证【章节2:LFM雷达测距】

目录 1. 参数设计 几个重要的约束关系 仿真参数设计 2. matlab雷达测距代码 完整源码 代码分析 回顾&#xff1a;LFM的基本原理请详见第一章 本章节将介绍LFM雷达测距的原理及实现 1. 参数设计 几个重要的约束关系 带通采样定理&#xff1a; 因此如果我们B80MHz时&a…
阅读更多...
SQL优化13连问，收藏好！

SQL优化13连问，收藏好！

1.日常工作中&#xff0c;你是怎么优化SQL的&#xff1f; 大家可以从这几个维度回答这个问题&#xff1a; 分析慢查询日志 使用explain查看执行计划 索引优化 深分页优化 避免全表扫描 避免返回不必要的数据&#xff08;如select具体字段而不是select*&#xff09; 使用…
阅读更多...
【Android -- 开发工具】Xshell 6 安装和使用教程

【Android -- 开发工具】Xshell 6 安装和使用教程

一、简介 Xshell 其实就是一个远程终端工具&#xff0c;它可以将你的个人电脑和你在远端的机器连接起来&#xff0c;通过向 Xshell 输入命令然后他通过网络将命令传送给远端Linux机器然后远端的Linux机器将其运行结果通过网络传回个人电脑。 二、Xshell 6 的安装 首先&#…
阅读更多...
如何通过命令行查看CentOS版本信息和linux系统信息

如何通过命令行查看CentOS版本信息和linux系统信息

1.如何查看已安装的CentOS版本信息&#xff1a; 1.cat /proc/version 2.uname -a 3.uname -r 4.cat /etc/centos-release 5.lsb_release -a 6.hostnamectl1. 第一种方式输出的结果是&#xff1a; Linux version 3.10.0-1127.el7.x86_64 (mockbuildkbuilder.bsys.centos.org) …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站