首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,package.json，webpack.config.js代码如下：

var name=require('./index1.js')

console.log('我是入口js文件')

console.log(name)
module.exports="我不是入口文件"
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

    </body>

</html>
{

  "name": "mywebpack",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT",

  "devDependencies": {

    "html-webpack-plugin": "4.5.0",

    "webpack": "4.44.2",

    "webpack-cli": "3.3.12"

  }

}
const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

  devtool: 'none',

  mode: 'development',

  entry: './src/index.js',

  output: {

    filename: 'built.js',

    path: path.resolve('dist')

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: './src/index.html'

    })

  ]

}

运行yarn webpack打包之后生成的built.js文件

1 打包之后的js文件是一个匿名函数自调用和一个当前函数调用时传入的一个对象

2 这个对象暂且称之为模块定义,它是一个键值对

3 这个对象的键名是当前加载模块的文件名和某个目录的拼接

4 这个键的值就是一个函数,和node.js模块加载有一些类似,会将被加载模块中的内容包裹在一个函数中

5 这个函数在将来某个时间点上会被调用，同时接收到一定的参数,利用这些参数可以实现模块的加载操作

 (function(modules) { // webpackBootstrap

     // 此变量为缓存区，如果有缓存，从缓存中取，没缓存添加

     var installedModules = {};

     //Webpack自定义的一个加载方法,核心功能就是返回被加载模块中导出的内容（具体后续分析）

     function __webpack_require__(moduleId) {

        //判断缓存中是否有对应的输出

         if(installedModules[moduleId]) {

             return installedModules[moduleId].exports;

         }

         //如果没有缓存创建一个新的module,针对两次require的方法调用是不一样的

        //因为作用域不同

         var module = installedModules[moduleId] = {

             i: moduleId,

             l: false,

             exports: {}

         };

         //改变this指向,调用函数

         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

         //表示已存在缓存中

         module.l = true;

         //返回输出

         return module.exports;

     }

     // 将模块定义保存一份，通过m属性挂载到自定义方法

     __webpack_require__.m = modules;

     // 保留缓存

     __webpack_require__.c = installedModules;

     // define getter function for harmony exports

     __webpack_require__.d = function(exports, name, getter) {

        //如果当前exports身上不具备name属性 则条件成立

         if(!__webpack_require__.o(exports, name)) {

             Object.defineProperty(exports, name, { enumerable: true, get: getter });

         }

     };

     // define __esModule on exports

     __webpack_require__.r = function(exports) {

        //下面的条件如果成立就说明是一个 esmodule

         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {

             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

         }

        //如果条件不成立,我们也直接在exports对象爱那个身上添加__esModule,它的值是true

         Object.defineProperty(exports, '__esModule', { value: true });

     };

     // create a fake namespace object

     // mode & 1: value is a module id, require it

     // mode & 2: merge all properties of value into the ns

     // mode & 4: return value when already ns object

     // mode & 8|1: behave like require

     __webpack_require__.t = function(value, mode) {

        // 1 调用 t 方法之后，我们会拿到被加载模块中的内容 value

        // 2 对于 value 来说我们可能会直接返回，也可能会处理之后再返回

         if(mode & 1) value = __webpack_require__(value);

         if(mode & 8) return value;

         if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;

         var ns = Object.create(null);

         __webpack_require__.r(ns);

         Object.defineProperty(ns, 'default', { enumerable: true, value: value });

         if(mode & 2 && typeof value != 'string') 
　　　　　 for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));

         return ns;

     };

     // getDefaultExport function for compatibility with non-harmony modules

     __webpack_require__.n = function(module) {

         var getter = module && module.__esModule ?

             function getDefault() { return module['default']; } :

             function getModuleExports() { return module; };

         __webpack_require__.d(getter, 'a', getter);

         return getter;

     };

     // Object.prototype.hasOwnProperty.call

     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

     // __webpack_public_path__

     __webpack_require__.p = "";

     // Load entry module and return exports

     return __webpack_require__(__webpack_require__.s = "./src/index.js");

 })

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

 ({

 "./src/index.js":

 //这块载入的时候传入了__webpack_require__方法，而下面index1.js未传入__webpack_require__方法

 //原因在于index1不需要再require其它模块了

 (function(module, exports, __webpack_require__) {

    var name=__webpack_require__(/*! ./index1.js */ "./src/index1.js")

    console.log('我是入口js文件')

    console.log(name)

 }),

 "./src/index1.js":

 (function(module, exports) {

    module.exports="我不是入口文件"

 })

 });

针对于上述的代码就相当于是将 {}（模块定义） 传递给了 modules,之后进行了代码运行，分模块导入导出，打包之后的文件__webpack_require__里面的方法，下节分场景具体分析。

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

没人会把我们变得越来越好，时间也只是陪衬。支撑我们变的越来越好的是我们自己不断进阶的才华，修养，品行以及不断的反思和修正。

webpack4.0源码解析之打包后js文件分析的更多相关文章

  1. webpack4.0源码解析之esModule打包分析

    入口文件index.js采用esModule方式导入模块文件,非入口文件index1.js分别采用CommonJS和esmodule规范进行导出. 首先,init之后创建一个简单的webpack基本的 ...

  2. Android事件总线（二）EventBus3.0源码解析

    1.构造函数 当我们要调用EventBus的功能时,比如注册或者发送事件,总会调用EventBus.getDefault()来获取EventBus实例: public static EventBus ...

  3. solr&lucene3.6.0源码解析（一）

      本文作为系列的第一篇,主要描述的是solr3.6.0开发环境的搭建   首先我们需要从官方网站下载solr的相关文件,下载地址为http://archive.apache.org/dist/luc ...

  4. solr&lucene3.6.0源码解析（四）

    本文要描述的是solr的查询插件,该查询插件目的用于生成Lucene的查询Query,类似于查询条件表达式,与solr查询插件相关UML类图如下: 如果我们强行将上面的类图纳入某种设计模式语言的话,本 ...

  5. solr&lucene3.6.0源码解析（三）

    solr索引操作(包括新增 更新 删除 提交 合并等)相关UML图如下 从上面的类图我们可以发现,其中体现了工厂方法模式及责任链模式的运用 UpdateRequestProcessor相当于责任链模式 ...

  6. Heritrix 3.1.0 源码解析（三十七）

    今天有兴趣重新看了一下heritrix3.1.0系统里面的线程池源码,heritrix系统没有采用java的cocurrency包里面的并发框架,而是采用了线程组ThreadGroup类来实现线程池的 ...

  7. solr&lucene3.6.0源码解析（二）

    上文描述了solr3.6.0怎么采用maven管理的方式在eclipse中搭建开发环境,在solr中,为了提高搜索性能,采用了缓存机制,这里描述的是LRU缓存,这里用到了 LinkedHashMap类 ...

  8. apache mina2.0源码解析（一）

    apache mina是一个基于java nio的网络通信框架,为TCP UDP ARP等协议提供了一致的编程模型:其源码结构展示了优秀的设计案例,可以为我们的编程事业提供参考. 依照惯例,首先搭建a ...

  9. EventBus3.0源码解析

    本文主要介绍EventBus3.0的源码 EventBus是一个Android事件发布/订阅框架,通过解耦发布者和订阅者简化 Android 事件传递. EventBus使用简单,并将事件发布和订阅充 ...

随机推荐

  1. ASP Net Core – CORS 预检请求

    CORS(跨源资源共享)是一种机制,它允许同一个来源运行的Web应用程序从在另一个来源运行的服务器访问资源.同源策略是一种非常严格的措施,因为它只允许与服务器起源于同一源的应用程序访问其资源.很多时候 ...

  2. 转 2 jmeter常用功能介绍-测试计划、线程组

    2 jmeter常用功能介绍-测试计划.线程组   1.测试计划测试用来描述一个性能测试,所有内容都是基于这个测试计划的. (1)User Defined Variables:设置用户全局变量.一般添 ...

  3. Eclipse在线安装FatJar插件失败解决方案

    在线安装fatjar(URL:http://kurucz-grafika.de/fatjar) 快要安装完的时候报错如下: 找了很久解决方法,终于有了下文:很是粗乎意料呃,下载一个eclipse2.0 ...

  4. VirtualBox Guest Additions 下载地址以及简介

    下载者可将以下链接粘贴到浏览器上,根据Vbox的版本找到自己对应的增强. http://download.virtualbox.org/virtualbox/5.0.10/ 虚拟机安装VBoxAddi ...

  5. 深度漫谈数据系统架构——Lambda architecture

    https://mp.weixin.qq.com/s/whmhm2yzug2WVdH3dTq8hg

  6. 内存屏障在CPU、JVM、JDK中的实现

    前言 内存屏障(英语:Memory barrier),也称内存栅栏,内存栅障,屏障指令等,是一类同步屏障指令,它使得 CPU 或编译器在对内存进行操作的时候, 严格按照一定的顺序来执行, 也就是说在内 ...

  7. vulnhub靶场之AI-WEB1.0渗透记录

    在本机电脑上自行搭建了一个练手的靶场,下面是记录渗透过程 目录 一.确认靶机ip 二.端口&目录扫描 三.查看敏感目录 四.sql注入 五.get shell 六.系统提权 确认靶机ip ka ...

  8. 3.centos 7执行service iptables save报错问题

    1.报错 [root@localhost ~]# service iptables save The service command supports only basic LSB actions ( ...

  9. jvm系列五-java内存模型初览(1)

    本文转载自:再有人问你Java内存模型是什么,就把这篇文章发给他. 网上有很多关于Java内存模型的文章,在<深入理解Java虚拟机>和<Java并发编程的艺术>等书中也都有关 ...

  10. cartographer环境建立以及建图测试（详细级）