webpack打包结果运行流程分析

最新推荐文章于 2024-04-27 08:39:59 发布
最新推荐文章于 2024-04-27 08:39:59 发布
阅读量1k 收藏
点赞数
分类专栏： webpack JavaScript 文章标签： javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roamingcode/article/details/123623794
版权

webpack自身的定位是一个模块打包器，他的的理念是万物皆模块。然而其自身只能处理 javascript 模块以及 json 模块，那么何以敢称万物皆可打包呢，这就引出了 loader 机制，loader 可将各式各样的引用资源进行转化，然后输出为 webpack 可以识别的 javascript 模块并进行打包处理。

基本配置
const path = require('path');

/**
 * 为配置文件提供类型支持
 * @type {import('webpack').Configuration}
 */
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: false,
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: path.join(__dirname, './src/loaders/markdown-loader.js')
      }
    ]
  }
};
打包入口文件
// index.js
import markdown from './mark.md';

console.log(markdown);

// mark.md
### markdown loader
`markdown` 转为 JavaScript 模块代码
markdown-loader

依赖 marked 包，用于解析Markdown文件，并输出 html 代码

第一种处理方式
const { marked } = require('marked');

module.exports = (source) => {
  let target = marked.parse(source);
  // 输出的为 JavaScript 字符串，供后续 webpack 的处理
  return `export default ${JSON.stringify(target)}`;
};
打包结果
/******/ 	var __webpack_modules__ = ({

/***/ "./src/mark.md":
/*!*********************!*\
  !*** ./src/mark.md ***!
  \*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("<h3 id=\"markdown-loader\">markdown loader</h3>\n<p><code>markdown</code> 转为 JavaScript 模块代码</p>\n");

/***/ })

/******/ 	});
第二种处理方式，引入html-loader来处理html代码
// markdown-loader.js
const { marked } = require('marked');

module.exports = (source) => {
  let target = marked.parse(source);

  // return `export default ${JSON.stringify(target)}`;
  /** 直接返回html，由 html-loader进行后续处理 */
  return target
};


// webpack配置文件
const path = require('path');

/**
 * @type {import('webpack').Configuration}
 */
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: false,
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          'html-loader', // 新增，处理由上一个loader返回的 html
          path.join(__dirname, './src/loaders/markdown-loader.js')
        ]
      }
    ]
  }
};
打包结果
/******/ 	var __webpack_modules__ = ({

/***/ "./src/mark.md":
/*!*********************!*\
  !*** ./src/mark.md ***!
  \*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
// Module
var code = "<h3 id=\"markdown-loader\">markdown loader</h3>\n<p><code>markdown</code> 转为 JavaScript 模块代码</p>\n";
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);

/***/ })

/******/ 	});
webpack整体打包结果分析
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/mark.md":
/*!*********************!*\
  !*** ./src/mark.md ***!
  \*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
// Module
var code = "<h3 id=\"markdown-loader\">markdown loader</h3>\n<p><code>markdown</code> 转为 JavaScript 模块代码</p>\n";
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _mark_md__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mark.md */ "./src/mark.md");


console.log(_mark_md__WEBPACK_IMPORTED_MODULE_0__["default"]);

})();

/******/ })()
;
执行入口
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _mark_md__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mark.md */ "./src/mark.md");


console.log(_mark_md__WEBPACK_IMPORTED_MODULE_0__["default"]);

})();
webpack_require.r
/******/ 	/* webpack/runtime/make namespace object exports下挂载 __esModule 属性，用于标记是否是ES模块代码 */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
webpack_require 加载资源
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	function __webpack_require__(moduleId) { // moduleId 即为 "./src/mark.md"
/******/ 		// Check if module is in cache 缓存检测
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function 执行 __webpack_modules__[moduleId] 也就是__webpack_modules__["./src/mark.md"]
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module 返回 module.exports 对象
/******/ 		return module.exports;
/******/ 	}
webpack_modules["./src/mark.md"]
/******/ 	var __webpack_modules__ = ({

/***/ "./src/mark.md":
/*!*********************!*\
  !*** ./src/mark.md ***!
  \*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

// 标记 ES 模块
__webpack_require__.r(__webpack_exports__);
// 为 __webpack_exports__ 挂载 "default" 属性，并设置 "getter" 方法为 () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
// Module
var code = "<h3 id=\"markdown-loader\">markdown loader</h3>\n<p><code>markdown</code> 转为 JavaScript 模块代码</p>\n";
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);

/***/ })

/******/ 	});
webpack_require.d
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); // get: () => (__WEBPACK_DEFAULT_EXPORT__),当访问 exports.default 时，其值为 __WEBPACK_DEFAULT_EXPORT__也即是上文对应的 code 值
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand 对象的属性检测 */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
运行的结果
var _mark_md__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mark.md */ "./src/mark.md")

// _mark_md__WEBPACK_IMPORTED_MODULE_0__["default"] => 创建的新module即__webpack_module_cache__[moduleId]，并导出 exports 对象 => {exports: {default: () => "<h3 id=\"markdown-loader\">markdown loader</h3>\n<p><code>markdown</code> 转为 JavaScript 模块代码</p>\n"}} =>
// 通过 __webpack_require__.d 方法为 exports下的default属性设置了 getter 方法，所以_mark_md__WEBPACK_IMPORTED_MODULE_0__["default"] = "<h3 id=\"markdown-loader\">markdown loader</h3>\n<p><code>markdown</code> 转为 JavaScript 模块代码</p>\n"
roamingcode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack源码分析-打包后的文件分析
qq_34051666的博客
08-10 929
分析webpack打包后的文件结构，了解webpack的工作机制。
Webpack打包后模块分析
qq_46335862的博客
09-11 409
日拱一卒之Webpack打包后模块分析
【Vue】如何使用Webpack实现打包操作
最新发布
qq_51933234的博客
04-27 1497
其实，我觉得这个webpack打包更有意思的，把我们的源文件进行压缩后，可以直接调用或者运行。我之前玩过一段时间的小程序，当时有个人给了我一个程序代码就是打包过后的（当时自己还不知道打包这个东东），这个程序可以用小程序直接运行，但是那么代码就看不懂，让自己困惑了好一段时间。当然现在自己学的比较多，之前不同的地方来慢慢清晰了起来。为什么要说这个事呢？其实是希望在屏幕前看这篇博客的小伙伴能够不忘初心，砥砺前行。那些让你现在迷惑的，搞不懂的，终有一天，你会把所有的细节，所以的内部把内容都搞明白的！加油！各位！
看完这篇还搞不懂webpack，求你打我
越努力，越幸运！
12-24 2148
一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，T...
webpack打包结果的分析
m0_67810366的博客
03-19 1278
webpack在打包好的js文件里，首先定义了一个iife（自执行函数）。在自执行函数里，Webpack会创建一个__webpack_modules__对象，该对象包含了所有模块的定义。这个过程是Webpack构建过程的开始，它将所有模块的代码整合在一起，这个对象的key就是模块的路径，而value是一个function，这个函数里就是存放我们写的模块源码。然后webpack会定义一个模块缓存对象__webpack_module_cache__和一个模块加载函数__webpack_require__。
webpack 打包结果分析
彩虹
08-01 3175
官方工具: offical Analyse Tool 运行命令: mac: webpack –profile –json &gt;stats.json window:webpack –profile –json | Out-file’stats.json’ -Encoding OEM 生成json文件后上传到 http://webpack.github.io/anal...
webpack打包构建流程
03-13
webpack 的打包构建流程主要包括创建 Compiler 对象、执行 run 方法、创建 Compilation 对象、执行 beforeCompile 钩子函数、执行 compile 钩子函数、执行 make 钩子函数和输出编译结果等阶段。 在了解了 webpack ...
webpack1-打包流程
01-20
这样，你的页面就可以使用Webpack打包后的代码了。 **8. 页面效果** 最后，当你在浏览器中打开这个HTML文件时，应该可以看到预期的页面效果。如果在开发过程中，你可以通过`dev`脚本来启动Webpack的开发服务器，...
webpack打包Ts简易搭建
06-29
在这个“webpack打包Ts简易搭建”项目中，我们将探讨如何使用Webpack与TypeScript（Ts）进行配置和构建。 1. **Webpack 基本概念**： - **Entry（入口）**: 项目的起点，Webpack 从这个文件开始构建依赖图。 - **...
简单使用webpack打包文件的实现
10-16
4. 运行 webpack 命令进行打包。 这个过程展示了 webpack 如何处理模块间的依赖关系，并将它们合并成可部署的浏览器可读文件。对于更复杂的项目，你可能还需要配置其他插件和加载器，以处理 CSS、图片和其他资源。...
webpack打包程序代码
07-07
Webpack 是一个流行的模块打包工具，它能够将 JavaScript、CSS、图片等资源文件转换并整合到一起，形成适合浏览器加载的静态资源。在深入探讨 Webpack 的核心概念和使用方法之前，我们先了解一下基本的背景知识。 ...
详解webpack 最简打包结果分析
12-12
现在的 webpack 不再是入门噩梦,过去 webpack 最让人心塞的莫过于配置文件，而 webpack4 诞生随之而来的是无配置 webpack。 使用 webpack4，至少只需要安装 webpack 和 webpack cli。所以大家完全可以自己打一个最简单的包，还能修改插件对比前后的区别。 npm i webpack webpack-cli -D 安装后，因为 webpack4 会默认 src 为入口目录，所以先新建 src/index.js。 // src/index.js import { sth } from './shouldImport' import other f
webpack打包后文件分析
花神的博客
08-02 5008
平常遇到喜欢的页面总喜欢拿来欣赏一番，今天就以webpack+vue的项目为例分析一下打包后的源码。 环境： webpack4.16 vue2.5.16 为了方便理解，先使用webpack打一个最简单的包（未使用vue），下面是混淆压缩前的伪代码 (function (modules) { var installedModules = {} // 缓存模块 // 处理AMD ...
如何用webpack打包umd模块并测试打包结果
weixin_34281477的博客
02-22 3893
对于 JavaScript 的模块而言, webpack 可以用来build 基于浏览器或服务端的包. 下面让我们学习如何使用webpack生成UMD. 首先需要全局安装webpack npm install -g webpack 让我们先来创建一个用来返回两数之和的加法模块. // add.js module.exports = fun...
解析webpack 打包后文件分析
weixin_44526331的博客
04-26 3390
webpack 用于编译 javascript 模块， 可以把文件格式编译成我们想要的静态文件格式， 但是处理的过程并不是全部由 webpack 本身完成， webpack 只是提供了一个打包机制， 对于各类文件的打包处理需要使用相对应的 预处理模块 loader 来处理， 作为一种机制 webpack&...
webpack基础一个最基础的打包 html + js + css
weixin_30469385的博客
06-18 5406
看了一大堆webpack的例子，最终发现都是神仙打架了。 我觉得首先只要能够搭起来一个最基本的项目入了门，以后就可以自己慢慢的往里钻研了。 所以今天搭了一个webpack的项目 ok，GO 1、初始化一个npm项目 npm i -y 2、安装webpack，4.0以上装webpack-cli npm i webpack webpack-cli -D 3、改pac...
webpack4源码分析
weixin_33688840的博客
12-18 534
webpack设计模式 Webpack 源码是一个插件的架构，他的很多功能都是通过诸多的内置插件实现的。Webpack为此专门自己写一个插件系统，叫 Tapable 主要提供了注册和调用插件的功能。 Tapable tabpable是一个事件发布订阅插件，它支持同步和异步两种；在需要使用的类上继承tabpable，并且该类的构造函数中使用this.hooks添加事件名称。 this.hook...
webpack打包后运行时文件分析（webpack5）
qssn的博客
05-18 1660
本文基于webpack5，分析打包后的文件，参考了网上的资料，同时加上了个人的理解，欢迎讨论。 代码已经关联到github： 链接地址 觉得不错可以顺手点个star，这里会持续分享自己的开发经验（： 简单打包 文件介绍 //index.js 入口 import { cc } from './Test' cc() //Test.js function cc(){} export {cc} 运行时分析 webpack执行打包后生成的js文件是一个立即执行函数，其参数modules为一个对象{}，包含我们所
webpack打包流程
06-09
Webpack打包流程分为以下几个步骤： 1. 解析配置文件：Webpack会先读取配置文件，分析入口文件、输出路径、loader、插件等信息。 2. 解析模块：Webpack从入口文件开始递归解析所有依赖的模块，每个模块都会经过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值