解析webpack打包CommonJS时生成代码

最新推荐文章于 2024-04-21 23:49:28 发布
最新推荐文章于 2024-04-21 23:49:28 发布
阅读量960 收藏
点赞数
分类专栏： 前端 文章标签： js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/109922963
版权

介绍

前端模块化开发通常会用到commonJS或ES6提供的模块化语法，此处介绍通过commonJS时，webpack打包生成文件的代码
webpack版本：3.6.0

打包前的文件

在这里插入图片描述

// main.js
const {
   add, mul } = require('./mathUtils.js')

console.log(add(20, 50))
console.log(mul(20, 50))

// mathUtils.js
function add(a, b) {
   
    return a + b;
}

function mul(a, b) {
   
    return a * b;
}

module.exports = {
   
    add,
    mul
}


// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

打包后

终端运行webpack ./src/main.js ./dist/bundle.js 进行打包
在这里插入图片描述
在这里插入图片描述
打包生成bundle.js，注意我们已经在index.html中引入了它，此时运行index.html，在控制台中可以看到运行结果
在这里插入图片描述
一切正常，接下来进入正题，开始解析源码

代码解析

完整代码
/******/ (function(modules) {
    // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {
   };
/******/
/******/ 	// 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,
/******/
最低0.47元/天 解锁文章
tanleiDD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack为浏览器打包CommonJsAMD模块
08-07
一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
【 webpack系列（二）】一个基于CommonJS模块化方案的小demo —— 带你简单体验 webpack 打包流程
JZevin的博客
09-10 402
文章目录一. webpack基础1.1 前端模块化开发1.2 打包二. webpack初体验2.1 安装webpack2.2 创建项目目录结构2.3 npm初始化2.4 代码编写2.4.1 math.js（模块代码）2.4.2 main.js（入口文件）2.4.3 index.html（浏览器展示文件）2.5 webpack打包2.6 修改引入文件为打包输出文件三. 写在最后 一. webpack基础 webpack —— JavaScript 应用程序的静态模块打包器（module bundler）。 它
《Webpack 实战》——第二章：模块打包
最新发布
qq_55680773的博客
04-21 1007
相信在上一章的介绍里，各位已经对“模块化思想”、“Webpack打包”有了一定的了解。本文将就此继续深入了解【模块打包】随着模块化思想的逐渐推广，应运而生了与其相关的编写标准被称为——模块标准。认识不同的模块标准的同时，也要去了解其背后的思想，这样有利于我们更好的去编写出符合对应模块标准的模块，同时也让我们可以根据不同模块标准的特点进行选择与区分对比。
common js /es6 模块化规范/ webpack打包
小元子
01-18 273
全局安装 npm install -g webpack webpack-cli 查看版本 webpack -v 因为是最新版本 所以打包时候加-o:webpack ./src/main.js -o ./dist/mm.js 每次更新完数据都需要重新打包！！！
FE - 走向Node与Webpack 之路 - CommonJS 模块化
原小明
02-21 3276
1. 参考资料JavaScript 标准参考教程（alpha）CommonJS规范（推荐 - 阮一峰写的）官方网站 （看半天，不知道干啥！）CommonJS 是什么 ？ （有些晕）2. 基本环境 node v4.5.0 npm v4.2.0 这里基本环境安装配置就不说了，自己查找资料。使用webstrom ，使用 node 记得enable ，写相关命令的时候，才会提醒显示： 如图：我的是已经
webpack esmodule、commonjs生成代码解析
weixin_43294560的博客
12-12 501
webpack esmodule、commonjs生成代码解析。
webpack打包程序代码
07-07
Webpack 正是这样的工具，它可以将项目中的各种依赖关系解析出来，生成一个或多个优化过的静态文件，以便浏览器能够正确执行。 在使用 Webpack 之前，你需要修改 `package.json` 文件，这是 Node.js 项目的配置文件...
webpack dll打包重复问题优化的解决
10-17
webpack DLL打包重复问题的优化主要涉及到在使用webpack的DllPlugin时，如何避免生成的DLL包中包含重复的代码。DLL（Dynamic Link Library）打包是为了提高构建速度，它将常用的库预先打包成一个独立的文件，后续的...
webpack:webpack打包机制与源码解析
04-16
8. **源码解析**：Webpack 使用抽象语法树（AST）来解析源代码，理解模块间的依赖关系。这个过程可以帮助Webpack找到所有需要处理的模块，以及它们之间的依赖关系。 9. **代码分割（Code Splitting）**：Webpack ...
webpack组织模块打包Library的原理及实现
08-27
在开发库（Library）时，与打包单一应用程序不同，我们通常希望生成的代码可以作为一个模块导入到其他项目中。本文将深入探讨 webpack 组织模块打包 Library 的原理及其实现方法。 首先，我们要理解在 webpack 配置...
webpack4.x CommonJS模块化浅析
12-10
webpack 4.x 版本对 CommonJS 模块化的支持主要体现在其强大的模块解析和打包能力上。CommonJS 是 Node.js 环境下广泛采用的模块化规范，通过 `require` 函数来导入模块，通过 `module.exports` 或 `exports` 来导出...
利用webpack理解CommonJS和ES Modules的差异区别
10-15
主要介绍了利用webpack理解CommonJS和ES Modules的差异区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack模块化原理-commonjs
weixin_34248023的博客
07-26 175
我们都知道，webpack作为一个构建工具，解决了前端代码缺少模块化能力的问题。我们写的代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。这些能力，都是因为webpack对我们的代码进行了一层包装，本文就以webpack生成的代码入手，分析webpack是如何实现模块化的。 PS: webpack的模块不仅指js，包...
手写一个CommonJS打包工具（一）
weixin_33748818的博客
04-10 299
本文首发于知乎专栏：http://zhuanlan.zhihu.com/starkwang CommonJS 是一个流行的前端模块化规范，也是目前 NodeJS 以及其模块托管仓库 npm 使用的规范，但目前暂无浏览器支持 CommonJS 。要想让浏览器用上这些模块，必须转换格式。 这个系列的文章，我们会一步步完成一个基于 Commo...
关于webpack打包项目
weixin_45960957的博客
06-30 162
一、关于webpack的安装 1、安装node.js环境 这个就不多说了 2、全局安装webpack 命令：npm install webpack -g （不建议全局安装webpack，因为在创建项目时，还是要安装一次） 3、单个项目安装webpack： 命令：npm install webpack --save-dev 4、安装指定版本的webpac 命令：npm install webpack@3.12.0 -D 二、关于webpack打包项目 1、新建个项目目录并在目录中安装webpack 2、初始化
es6 混合commjs_Webpack打包ES6和CommonJs混合React
weixin_39980929的博客
01-14 406
在学习React过程中一直都是用ES6和ES7中的特性，使用原先的基本配置已经不能满足要求了。必须对现有的配置进行升级。下面我说一下我的React环境的升级过程。最开始我们使用# npm install babel-core babel-loader --save-dev安装完成babel-core和babel-loader以后，下面是编写Webpack配置文件，默认文件名是webpack.con...
webpack打包单个js文件
zsq199771的博客
03-02 1093
webpack打包js文件
【前端模块化】-关于CommonJS规范
weixin_53478983的博客
12-08 668
CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。
如何还原webpack打包的js代码
09-13
### 回答1： 要还原 Webpack 打包后的 JavaScript 代码，可以使用 source-map。source-map 可以将打包后的代码映射回原始的代码，使调试更加方便。 你可以在 webpack 配置文件中设置 devtool 选项来生成 source-map： ``` module.exports = { // ... devtool: 'inline-source-map', // ... }; ``` 然后，在浏览器中打开调试器，单击打包后的代码文件，即可看到原始的 JavaScript 代码。 请注意，这种方法仅适用于开发环境，不适用于生产环境，因为生成的 source-map 文件会增加代码体积，降低性能。 ### 回答2： 要还原经过webpack打包的js代码，可以按照以下步骤进行操作： 1. 确认项目的webpack配置文件位置，通常为项目根目录下的webpack.config.js文件。打开该文件，可以查看到webpack的配置选项。 2. 首先需要安装依赖项，以便能够还原打包的代码。在命令行中切换到项目根目录下，然后运行以下命令安装webpack和相关插件： npm install webpack webpack-cli --save-dev 3. 配置一个简单的webpack.config.js文件，在其中指定入口文件和输出路径。例如： const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }; 4. 使用webpack命令进行打包，将原始代码打包成bundle.js文件。在命令行中输入以下命令： npx webpack --config webpack.config.js 等待webpack完成打包操作后，会生成一个bundle.js文件，存放在配置的输出路径（dist文件夹）中。 5. 在网页中直接引入还原过的bundle.js文件，即可使用还原后的代码。 <script src="dist/bundle.js"></script> 通过以上步骤，就可以还原经过webpack打包的js代码。首先配置webpack.config.js文件，然后使用webpack命令进行打包，最后将生成的bundle.js文件引入到网页中即可。这样就能够还原被打包处理过的代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tanleiDD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值