首先,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. Django - WebSocket：dwebsocket

    Django - WebSocket:dwebsocket 什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换 ...

  2. ModelForm的基本用法：

    一.ModelForm的基本用法示例: from django import forms from app01 import models class BookModelForm(forms.Mode ...

  3. Py第一次练习，第二次练习

    有两个列表      l1 = [11,22,33]        l2 = [22,33,44] 1.获取内容相同的元素列表2.获取l1中有l2中没有的元素列表3.获取l1和l2中不同的元素列表 l ...

  4. SharePoint Online 站点模板中权限的设置

    SharePoint Online可以使用PnP引擎部署站点模板.这个模板的功能非常强大,除了可以定制主题,外观以外,还可以生成list并导入数据,生成文档库,导入文档等等. 今天重点说一下其中的站点 ...

  5. python工业互联网应用实战3—Django Admin列表

    Django Admin笔者使用下来可以说是Django框架的开发利器,业务model构建完成后,我们就能快速的构建一个增删查改的后台管理框架.对于大量的企业管理业务开发来说,可以快速的构建一个可发布 ...

  6. Linux进程内存用量分析之堆内存篇

    https://mp.weixin.qq.com/s/a6mLMDinYQGUSaOsGYCEaA 独家|Linux进程内存用量分析之堆内存篇 姬晨烜 58技术 2019-12-06 导语 本文将介绍 ...

  7. （001）每日SQL学习：关于UNION的使用

    union内部必须有相同的列或者相同的数据类型,同时,每条 SELECT 语句中的列的顺序必须相同.union合并了select的结果集. union 与union all的不同: union合并了重 ...

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

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

  9. bzoj 2038（莫队算法）

    2038: [2009国家集训队]小Z的袜子(hose) 时间限制: 20 Sec  内存限制: 259 MB 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来 ...

  10. Java IO--字节流与字符流OutputStream/InputStream/Writer/Reader

    流的概念 程序中的输入输出都是以流的形式保存的,流中保存的实际上全都是字节文件. 字节流与字符流 内容操作就四个类:OutputStream.InputStream.Writer.Reader 字节流 ...