剖析webpack模块化原理

最新推荐文章于 2024-06-27 17:59:38 发布
最新推荐文章于 2024-06-27 17:59:38 发布
阅读量235 收藏
点赞数
文章标签： webpack 操作系统 ViewUI
原文链接：https://segmentfault.com/a/1190000014389653
版权

创建项目

先创建一个最简单的项目，之后用webpack打包，然后分析打包之后的代码。

app.js入口文件

import('./a').then(a=>{
    console.log('成功加载a.js文件');
    a();
})

a.js 文件

import b from './b.js';
function a() {
    console.log('this is a.js'); 
    b();
}
export default a;

b.js 文件

function b() {
    console.log('this is b.js')
}
export default b;

webpack配置文件（webpack.config.js）

const path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    chunkFilename: '[name].bundle.js'
  }
};

打包之后的文件

0.bundle.js
main.js

main.js的内容

/******/ (function(modules) { // webpackBootstrap
/******/     // install a JSONP callback for chunk loading
/******/     var parentJsonpFunction = window["webpackJsonp"];
/******/     window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/         // add "moreModules" to the modules object,
/******/         // then flag all "chunkIds" as loaded and fire callback
/******/         var moduleId, chunkId, i = 0, resolves = [], result;
/******/         for(;i < chunkIds.length; i++) {
/******/             chunkId = chunkIds[i];
/******/             if(installedChunks[chunkId]) {
/******/                 resolves.push(installedChunks[chunkId][0]);
/******/             }
/******/             installedChunks[chunkId] = 0;
/******/         }
/******/         for(moduleId in moreModules) {
/******/             if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/                 modules[moduleId] = moreModules[moduleId];
/******/             }
/******/         }
/******/         if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
/******/         while(resolves.length) {
/******/             resolves.shift()();
/******/         }
/******/
/******/     };
/******/
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // objects to store loaded and loading chunks
/******/     var installedChunks = {
/******/         1: 0
/******/     };
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/     // This file contains only the entry chunk.
/******/     // The chunk loading function for additional chunks
/******/     __webpack_require__.e = function requireEnsure(chunkId) {
/******/         var installedChunkData = installedChunks[chunkId];
/******/         if(installedChunkData === 0) {
/******/             return new Promise(function(resolve) { resolve(); });
/******/         }
/******/
/******/         // a Promise means "currently loading".
/******/         if(installedChunkData) {
/******/             return installedChunkData[2];
/******/         }
/******/
/******/         // setup Promise in chunk cache
/******/         var promise = new Promise(function(resolve, reject) {
/******/             installedChunkData = installedChunks[chunkId] = [resolve, reject];
/******/         });
/******/         installedChunkData[2] = promise;
/******/
/******/         // start chunk loading
/******/         var head = document.getElementsByTagName('head')[0];
/******/         var script = document.createElement('script');
/******/         script.type = 'text/javascript';
/******/         script.charset = 'utf-8';
/******/         script.async = true;
/******/         script.timeout = 120000;
/******/
/******/         if (__webpack_require__.nc) {
/******/             script.setAttribute("nonce", __webpack_require__.nc);
/******/         }
/******/         script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".bundle.js";
/******/         var timeout = setTimeout(onScriptComplete, 120000);
/******/         script.onerror = script.onload = onScriptComplete;
/******/         function onScriptComplete() {
/******/             // avoid mem leaks in IE.
/******/             script.onerror = script.onload = null;
/******/             clearTimeout(timeout);
/******/             var chunk = installedChunks[chunkId];
/******/             if(chunk !== 0) {
/******/                 if(chunk) {
/******/                     chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/                 }
/******/                 installedChunks[chunkId] = undefined;
/******/             }
/******/         };
/******/         head.appendChild(script);
/******/
/******/         return promise;
/******/     };
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // 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 = "";
/******/
/******/     // on error function for async loading
/******/     __webpack_require__.oe = function(err) { console.error(err); throw err; };
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {


__webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, 1)).then(a=>{
    console.log('成功加载a.js文件');
    a();
})

/***/ })
/******/ ]);

0.bundle.js的内容

webpackJsonp([0],[
/* 0 */,
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b_js__ = __webpack_require__(2);


function a() {
    console.log('this is a.js'); 
    Object(__WEBPACK_IMPORTED_MODULE_0__b_js__["a" /* default */])();
}

/* harmony default export */ __webpack_exports__["default"] = (a);

/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
function b() {
    console.log('this is b.js')
}

/* harmony default export */ __webpack_exports__["a"] = (b);

/***/ })
]);

剖析

先来一句概括的话，webpack模块化其实是通过自执行函数启动，然后通过webpack自定义的exports 和require 来实现的模块化。对于代码分割，webpack自定义了一个函数以jsonp的方式加载js文件。下面开始慢慢详解。

首先我们先看启动文件（也就是第一个运行的js文件，这里是main.js），这个文件会以自执行的方式启动。我这里把无关注释删除，代码折叠之后的截图。
image
其实就是一个自执行函数，长这样的

(function(modules){})([])

然后我们看这个自执行函数干了什么事情？

image

1.定义了一个webpackJsonp的方法挂到了windows对象下面

此方法是一个回调函数，会用在chunk加载完成之后立即执行这个函数的作用有三个

a.加载chunk

首先介绍一下变量installedChunks，这个变量记录了chunk的加载情况，0代表已经加载 , [resolve,reject]代表着正在加载。所以看下面的for循序，是把chunkIds全部记录到installedChunks中，并标记为已经加载

image

b.加载module

image

c.执行传进来的module

如果executeModule存在，则对其中对应moduleId的模块进行运行，我这个打包chul出来的文件里面没有这块代码，估计是因为webpack比较智能。不需要这个功能就把代码省略了吧。

2.定义了__webpack_require__函数

此函数的作用是根据传进来的模块id执行对应模块的代码。__webpack_require__上还挂载了其他一些方法和属性。

__webpack_require__.e
__webpack_require__.m
__webpack_require__.c
__webpack_require__.d
__webpack_require__.n
__webpack_require__.o
__webpack_require__.p
__webpack_require__.oe

image

上边这个函数（__webpack_require__）的作用是执行某一模块，并将其加入到缓存，然后返回模块的exports

image

__webpack_require__.e 函数的作用是如果存在代码分割，那后续的chunk的加载都是使用此函数加载，此函数会创建一个script标签，并从服务器请求相应的js文件

weixin_34296641
关注
webpack模块化的原理
gogo2027的博客
10-10 263
webpack 中实现模块化的核心就是函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的。并且利用立即执行函数的特点实现了作用域的封闭避免了全局变量的污染，非常的巧妙。
webpack模块解析
weixin_34088838的博客
06-13 268
前面的话 　　在web存在多种支持JavaScript模块化的工具(如requirejs和r.js)，这些工具各有优势和限制。webpack基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。本文将详细介绍webpack的模块解析   模块 　　在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块 ...
【Webpack】前端工程化之Webpack与模块化开发
最新发布
aDiaoYa_的博客
06-27 1133
`Webpack`是一个JavaScript应用的静态模块化打包工具，它最早的出发点就是去实践前端方向的模块化开发，解决如何在前端项目中更高效地管理和维护项目中的每一个资源问题。在Webpack的理念中，前端项目中的任何资源都可以作为一个模块，任何模块都可以经过Loader机制的处理，最终再被打包到一起。
Webpack模块化原理图解
web前端开发
03-03 355
为什么需要模块化场景1A同学开发了模块a，B同学开发了模块b，在页面下通过如下方式进行引用<script src="a.js"></script>&...
webpack模块化原理-commonjs
weixin_34248023的博客
07-26 180
我们都知道，webpack作为一个构建工具，解决了前端代码缺少模块化能力的问题。我们写的代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。这些能力，都是因为webpack对我们的代码进行了一层包装，本文就以webpack生成的代码入手，分析webpack是如何实现模块化的。 PS: webpack的模块不仅指js，包...
Webpack原理整理（一）模块化原理
peifeng_chen的微博
04-09 1667
演示项目样例介绍 这次来介绍下webpack模块化的原理，这次以commonJS模块化为例，先来看看项目的目录结构是怎样的。 我们再来看看主要的内容，项目的内容非常简单，在index.js中用commonJS模块引入的方法，引入了一个js文件夹下common.js导出的 mul 乘法函数。 进行打包，查看模块化原理 我们进行npm run build打包（package.json）script中的build字段要改为web...
深入剖析 webpack 打包生成的一大堆代码到底是啥
小辣抓
08-12 9270
1.为什么我们需要webpack现代webapp开发自然离不开模块化的开发，现代mvvm框架，诸如angular, vue, react 让前端掀起了MVC的浪潮，所以，我们迫切的需要一个前端自动化构建的工具，用来做代码压缩，合并，打包等一系列的自动化的操作，在这之前比较流行的是grunt和gulp，自webpack初出头角之后，就收获了大量的关注。无疑，webpack将是前端自动化构建必不可少的工
webpack运行机制与核心工作原理
鸭绒的博客
07-26 5406
文章目录1.前言2.工作过程简介3. 工作原理剖析 1.前言 webpack专辑： 如何使用webpack实现模块化打包？ 如何通过Loader实现特殊资源加载？实例加载css文件 开发一个Loader 插件机制横向扩展webpack的构建能力 三个插件的使用实例 开发一个清除文件注释的插件 （学习插件原理） 通过上面的学习，我们已经对 Webpack 两个最重要的特性：Loader 和插件机制有了深入的了解，今天我们再来解读一下 Webpack 的运行机制和核心工作原理。 2.工作过程简介 Webpa
深入剖析Webpack插件机制与自定义插件开发
在本章中，我们将深入探讨Webpack插件机制的基本概念，作用及在Webpack中的应用场景。让我们一起来了解吧！ ## 1.1 什么是Webpack插件 Webpack插件是用于扩展Webpack功能的工具，可以让开发者在打包构建过程中实现...
了解webpack：前端模块化的起源与发展
### 1.1 现实需求与前端模块化 在软件开发领域中，模块化是一种重要的概念。随着前端技术的不断发展和应用场景的复杂化，前端模块化也变得越来越重要。 在过去，前端开发主要是以页面为单位进行开发，整个项目都是...
Angular 服务端渲染指南——深度剖析 Angular SSR 技术原理
程序员光剑
10-14 629
在过去几年中，前端框架层出不穷，如React、Vue、Angular等。Web应用越来越复杂，页面交互更加丰富。为了应对这些变化，前端开发社区都开始探索服务端渲染（Server-Side Rendering）技术，将组件化的UI逻辑下发到浏览器，并通过JS对数据进行处理。Angular是一个非常流行的服务端渲染框架。Angular服务端渲染（Server-Side Rendering，简称SSR）是指利用Node.js或其他服务器环境运行Angular应用，并生成静态HTML页面的过程。
webpack模块化
Voiceu的博客
06-13 625
模块化 webpack webpack的loader和plugin 模块化参考链接 webpack模块化
Webpack模块化
weixin_57770903的博客
04-27 726
Webpack模块化 了解如何使用Webpack 2将Bootstrap包含在项目中。 什么是 Webpack? webpack是近年来最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 开发者可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情
Webpack模块化原理简析
weixin_33857679的博客
07-29 363
webpack模块化原理简析 1.webpack的核心原理 一切皆模块：在webpack中，css,html.js，静态资源文件等都可以视作模块；便于管理，利于重复利用； 按需加载：进行代码分割，实现按需加载。 2. webpack模块化原理：以js为例，分析webpack构建common.js的模块化方式。 ①构建示例代码 //...
webpack之css模块化
coding...
05-04 4725
前言本文演示了如何开始css模块化；如何选择性的开启部分css文件的模块化功能；如何让模块化后写入html的class更具有可读性；涉及到的loader： css-loader、style-loader开启css-loader的模块化配置当前项目目录和package.json配置：：如何使css模块化？需要在我们的webpack.config.js中对css-loader进行一些额外设置。编辑ma...
webpack组织模块的原理 - 基础篇
weixin_33881050的博客
03-08 125
现在前端用Webpack打包JS和其它文件已经是主流了，加上Node的流行，使得前端的工程方式和后端越来越像。所有的东西都模块化，最后统一编译。Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项，在使用中出现一些迷之错误常常让人无所适从。所以了解一下Webpack究竟是怎么组织编译模块的，生成的代码到底是怎么执行的，还是很有好...
webpack模块化方案
m0_55584065的博客
06-27 274
和适当的加载器（loaders）来处理不同类型的模块。Webpack 支持以上所有模块化方案，并且可以通过配置文件 (
webpack模块化开发
琼歌
11-17 1425
1-------基本开发 项目环境搭建好后，我们需要做基本的开发设置，包括webpack.config.js的配置，一般为了方便开发有以下的固定模块可以供参考: /* * @Author: 琼歌先生 * @Date: 2018-07-30 14:07:03 * @Last Modified by: lastName.琼歌先生 * @Last Modifi...
webpack模块化原理
weixin_30298497的博客
03-24 101
https://segmentfault.com/a/1190000010349749 webpack模块化原理-commonjs https://segmentfault.com/a/1190000010955254 webpack模块化原理-ES module https://segmentfault.com/a/1190000011435407 webpack模块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值