`
JerryWang_SAP
  • 浏览: 1025175 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

阅读更多

读这篇文章的朋友,请确保对webpack有最基础的认识。

您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目。https://www.toutiao.com/i6612879647568822788/

我这里可以在回顾一下这个web pack的hello world项目。

用webpack打包之后,项目文件夹里包含了这些资源:

 

index.html的源代码很简单,就包含了一个webpack打包后生成的bundle.js文件:

 

那么运行时,Hello,Jerry的字符串是如何通过bundle.js打印出来的呢?

这就是本文要阐述的内容。我们可以从bundle.js第一行设置断点,然后开始调试:

 
 
 
 

把我们web工程里定义的两个module注入到webpack_require.m里:

 

因为我们在webpack.config.js里定义的入口模块为main.js:

 

在bundle.js里此处进行运行时加载:return webpack_require(webpack_require.s = "./main.js");

 

webpack_require函数本来就是在bundle.js里定义的:

 

首先检查main.js是否已经装载在内存里了:

 

对于我这个例子,显然没有,所以从头开始装载main.js.首先创建一个对象,id为./main.js:

 

然后执行这个module的函数,即我们实现在main.js里的javascript代码。当然经过webpack的加工,main.js里的代码已经通过eval的方式嵌入到bundle.js里了。

 

原始的main.js代码:

 

上述代码被webpack转换之后,main.js里的源代码被替换成了webpack_require:

 

从这里也能看出webpack递归处理module的思路,从webpack.config.js定义的entry module,即main.js出发,在main.js遇到需要require其他mobule的地方,递归进入webpack_require:

 

require("print.js")的执行过程,就是把print.js里定义的print函数本身,赋给module的exports属性:

 

print.js module装载完毕之后,就可以执行了。

 
 

注意第2行代码执行完毕后,html页面就出现了期望的字符:

 
 

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

 
0
0
分享到:
评论

相关推荐

    浅谈webpack打包生成的bundle.js文件过大的问题

    使用webpack进行打包时,发现bundle.js竟然有2M多。 解决办法 网上有去除插件、提取第三方库、压缩代码等方法。 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后...

    webpack简单入门教程

    这个简单的入门教程将引导你了解Webpack的基本概念和配置,让你快速上手。 首先,我们从核心概念开始: 1. **入口(Entry)**:Webpack 开始构建的地方,通常在`webpack.config.js`中定义。在这个例子中,可能`main....

    Webpack:Webpack与Node.js环境配置.docx

    Webpack:Webpack与Node.js环境配置.docx

    Webpack 从零入门到工程化实战.rar

    Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色,将各种资源如JavaScript、CSS、图片等进行打包,使得代码能够高效地运行在浏览器环境中。Webpack 提供了强大的依赖关系...

    手把手搭建h5框架,webpack+jq 与webpack +vue

    手把手搭建h5框架,webpack+jq 与webpack +vue。 1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式,手把手教程见README.md文档

    nodejs8.9.4(安装包)_npm_webpack_vue-cli安装详解.zip

    首先,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它使得开发者可以在服务器端运行JavaScript代码。Node.js的版本8.9.4是一个稳定版本,提供了良好的性能和兼容性。安装Node.js通常通过访问其官方网站...

    Web前端模块化开发教程(ES6+Node.js+Webpack)_源代码.zip

    它的工作原理是将项目视为一个模块依赖图,Webpack会遍历这个图并生成一个或多个"bundle",这些bundle是浏览器可以直接执行的JavaScript代码。Webpack通过loaders处理不同类型的文件(如CSS、图片等),并通过...

    Vue.js与Webpack安装教程.pdf

    Vue.js与Webpack安装教程 1 vue.js研究 1 1.1 vue.js介绍 1 1、vue.js是什么? 1 2、Vue.js与ECMAScript 1 3、Vue.js的使用 2 4、vue.js有哪些功能? 2 1.2 webpack入门 3 1.2.1 webpack介绍 3 1.2.2 安装webpack 4

    webpack-dev-server-demo.zip

    Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色,通过将各种资源(如JavaScript、CSS、图片等)打包成优化过的单一文件,来提高应用的加载速度和性能。Webpack-dev-server ...

    webpack 零基础入门教程.zip

    Webpack 是一个现代JavaScript应用程序的模块打包工具,它能够将各种资源如JavaScript、CSS、图片等进行打包处理,以便在浏览器中高效地加载和运行。本教程将从零基础出发,帮助你逐步掌握Webpack的核心概念和使用...

    PyPI 官网下载 | django-webpack-loader-0.1.2.tar.gz

    5. **运行Webpack**:在开发过程中,运行Webpack的watch模式,以便在代码变动时自动编译。 6. **部署**:在生产环境,确保在构建流程中执行Webpack打包,生成的静态文件应与Django的静态文件路径一致。 **重要特性...

    webpack1.x指导文档

    filename: '[name].bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist'), // 输出路径 publicPath: '/' // 公共路径 } ``` `[name]` 是一个占位符,会被替换为入口文件的名字,例如上面示例中的 `...

    Webpack入门视频教程.txt

    Webpack入门视频教程.txt 前端必备技能,助你快速掌握

    webpack.config.js

    webpack.config.jswebpack.config.js

    webpack入门必知必会

    本文旨在为初学者提供一个webpack的简单入门教程,通过对比传统的前端项目,展示webpack如何解决代码依赖管理和优化的问题。接下来,我们将逐步了解webpack的三个核心概念:拆分、打包和压缩。 ### 1. 传统项目中的...

    Three.js配合Webpack的Demo项目

    通过这个Demo项目,开发者可以学习到如何将Three.js项目与现代前端构建工具Webpack结合,理解它们的协同工作原理,以及如何配置Webpack来优化Three.js应用的性能。此外,还可以了解到如何在实际项目中管理和组织代码...

    Node.js-使用webpack搭建基于typescript的node开发环境template

    本教程将深入探讨如何使用Webpack搭建一个基于TypeScript的Node.js开发环境。Webpack是一个模块打包工具,它能够处理JavaScript、CSS、图片等静态资源,而TypeScript是JavaScript的一个超集,提供静态类型系统,增强...

    webpack教程之webpack.config.js配置文件

    Webpack 是一个模块打包工具,它将 JavaScript 模块转换成静态资源,以便在浏览器中运行。`webpack.config.js` 文件是 Webpack 的核心配置文件,它定义了项目的输入、输出、加载器、插件等设置。这篇教程将带你了解...

Global site tag (gtag.js) - Google Analytics