首先,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. 日志采集技术分析 Inode Inotify

    日志采集技术分析[阿里] - 新手学习导向 - 中国红客联盟 - Powered by HUC http://www.cnhonkerarmy.com/thread-236973-1-1.html

  2. 邮件解析 CNAME记录 A记录 NS记录 MX记录

    域名配置 示例发信配置请至域名 service.i-test.cn DNS服务提供商处添加TXT记录,并保持SPF记录正确,否则会无法发信.*1.所有权验证类型 主机记录 主域名 记录值 状态TXT ...

  3. 小麦苗数据库巡检脚本，支持Oracle、MySQL、SQL Server和PG等数据库

    目录 一.巡检脚本简介 二.巡检脚本特点 三.巡检结果展示 1.Oracle数据库 2.MySQL数据库 3.SQL Server数据库 4.PG数据库 5.OS信息 四.脚本运行方式 1.Oracl ...

  4. Docker系列（一）Docker概述,核心概念讲解,安装部署

    部分内容参考链接: Docker实战总结(非常全面,建议收藏) 一. Docker概述 Docker是一个开源的应用容器引擎(基于Go语言开发),让开发者可以打包他们的应用以及依赖包到一个可移植的容器 ...

  5. Docker 之 Jenkins自动化部署

    Docker 之 Jenkins自动化部署 Jenkins部署 jenkis 绑定gitlab shell脚本自动化构建Docker镜像 提升maven构建速度 jenkins 无法通过shell脚本 ...

  6. MySql数据表设计，索引优化，SQL优化，其他数据库

    MySql数据表设计,索引优化,SQL优化,其他数据库 1.数据表设计 1.1数据类型 1.2避免空值 1.3text类型优化 2.索引优化 2.1索引分类 2.2索引优化 3.SQL优化 3.1分批 ...

  7. 设计模式c++（1）

    本来是想把之前的<head first设计模式>看了,不过因为这本书是java实现的,跟c++还是略有区别. 于是找了一下,发现了一个不错的blog,打算连书带blog一起参考着看了. b ...

  8. Centos搭建spark

    Centos搭建spark 一.spark介绍 二.spark安装前提 三.集群规划 四.spark安装 五.修改spark环境变量 六.修改spark-env.sh 七.修改slaves 八.将安装 ...

  9. 正则表达式获取字符串的input标签的属性值

    直接上正则表达式: (?<=\<input.*value=\").*?(?=\") 字符串如下: <form action="https://www.b ...

  10. scala的隐式转换学习总结（详细）

    一,隐式转换函数 1, 格式, implicit def 函数名(参数):返回值类型={ //函数体 //返回值 } 2,例子: //导入对应的规则类,以免出现警告 scala> import ...