首先,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. 转 12 jmeter性能测试实战--web程序

    12 jmeter性能测试实战--web程序   项目背景 项目:XX网站环境:Windows需求:并发登录的性能测试场景:1s增加2个线程,运行2000次(线程数20,Ramp-Up seconds ...

  2. 前端面试之JavaScript中数组的方法！【残缺版！！】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

  3. jmeter的线程数，并发用户数，TPS,RPS 关系解说

    背景 在做性能测试的时候,传统方式都是用并发虚拟用户数来衡量系统的性能(站在客户端视角),一般适用于一些网页站点例如首页.H5的压测:而RPS(Requests per second)模式主要是为了方 ...

  4. 【转】使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录

    [原]http://blog.chinaunix.net/uid-26284395-id-2949145.html ssh-keygen  产生公钥与私钥对. ssh-copy-id 将本机的公钥复制 ...

  5. spring boot 启动 开启注解 加载 bean

    业务描述:创建一个cache类然后交给spring 管理. @Component @Scope("singleton") public class Cache { public C ...

  6. Feign配置日志的打印级别

    一.细粒度的配置Feign的日志级别(针对每个微服务配置) 1.java代码方式 (1)在Feign接口注解上面配置configuration /** * @author : maybesuch * ...

  7. FFmpeg libswscale源码分析1-API介绍

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/14349382.html libswscale 是 FFmpeg 中完成图像尺寸缩放和像素 ...

  8. Android webview 问题记录

    1. Android 7.1真机安装调试apk时报错,解析安装包失败 原因:sdk版本不支持7.1版本,需要调整minSdkVersion等参数,支持低版本 解决方法: android { compi ...

  9. JAVA对象分析之偏向锁、轻量级锁、重量级锁升级过程

    在HotSpot虚拟机里,对象在堆内存中的存储布局可以划分为三个部分: 对象头(Header) 实例数据(Instance Data) 对齐填充(Padding). 对象头 HotSpot虚拟机(后面 ...

  10. The Department of Redundancy Department

    Write a program that will remove all duplicates from a sequence of integers and print the list of un ...