首先,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. 【Android】关于连续多次点击控件的控制方案（新建监听类）

    参考:防止Android过快点击造成多次事件的三种方法_胖胖的博客-CSDN博客 实现逻辑很简单: 设置限定时间 在用户点击时开始计时 若计时未超过限定时间,则不允许触发点击事件 因还未学习过Rxja ...

  2. 前端面试之JavaScript的基本数据类型！

    前端面试之JavaScript的基本数据类型! JS的基本数据类型 数字 字符串 布尔值 JavaScript中有两个特殊的原始值: null (空) 和undefined (未定义), , 它们不是 ...

  3. no-referrer-when-downgrade

    原因: 从一个网站链接到另外一个网站会产生新的http请求,referrer是http请求中表示来源的字段.no-referrer-when-downgrade表示从https协议降为http协议时不 ...

  4. 支付回调地址 同步回调地址 异步回调地址 return_url和notify_url的区别

    [微信支付]JSAPI支付开发者文档 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_16&index=10 退款结果通知 ...

  5. Python基础（函数）

    为什么要用函数? 解决代码重用问题 统一维护 程序的组织结构清晰,可读性强函数:先定义后使用1.内置函数 built-in function eg:sum max len2.自定义函数:定义有参函数 ...

  6. Flash 终将谢幕：微软将于年底( 2020 年 )停止对 Flash 的支持

    近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新.早在 2017 ...

  7. loj10006数列分段

    题目描述 对于给定的一个长度为 N 的正整数数列 A,现要将其分成连续的若干段,并且每段和不超过 M(可以等于 M),问最少能将其分成多少段使得满足要求. 输入格式 第一行包含两个正整数 N,M表示了 ...

  8. 004_C++常见错误类型总结（一）之最后几行错误

    1.介绍 经常进行代码测试和静态代码分析的同学,应该会遇到这样的一个问题,就是一个程序段的最后几行,或者一个源文件末尾会出现错误.本文,结合专业的静态代码分析软件PSV-Studio提供错误类型代码库 ...

  9. 将文件转成byte[]文件属组

    /** * * @Description : 读取文件数组 * @Method_Name : fileBuff * @param filePath * @return * @throws IOExce ...

  10. linux基础进阶命令详解（输出重定向(2>&1,1>&2,&>file)、输入重定向、管道符、通配符、三种引号、软连接、硬链接、根“/”、绝对路径vs相对路径）

    本章命令(共9个): 1 2 3 4 5 6 7 8 9 输出重定向 输入重定向 管道符 通配符 三种引号 软连接 硬链接 根"/" 绝对路径vs相对路径 1.输出重定向 作用:一 ...