读这篇文章的朋友,请确保对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的原创文章,请关注公众号"汪子熙":
相关推荐
使用webpack进行打包时,发现bundle.js竟然有2M多。 解决办法 网上有去除插件、提取第三方库、压缩代码等方法。 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后...
这个简单的入门教程将引导你了解Webpack的基本概念和配置,让你快速上手。 首先,我们从核心概念开始: 1. **入口(Entry)**:Webpack 开始构建的地方,通常在`webpack.config.js`中定义。在这个例子中,可能`main....
Webpack:Webpack与Node.js环境配置.docx
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色,将各种资源如JavaScript、CSS、图片等进行打包,使得代码能够高效地运行在浏览器环境中。Webpack 提供了强大的依赖关系...
手把手搭建h5框架,webpack+jq 与webpack +vue。 1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式,手把手教程见README.md文档
它的工作原理是将项目视为一个模块依赖图,Webpack会遍历这个图并生成一个或多个"bundle",这些bundle是浏览器可以直接执行的JavaScript代码。Webpack通过loaders处理不同类型的文件(如CSS、图片等),并通过...
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 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色,通过将各种资源(如JavaScript、CSS、图片等)打包成优化过的单一文件,来提高应用的加载速度和性能。Webpack-dev-server ...
Webpack 是一个现代JavaScript应用程序的模块打包工具,它能够将各种资源如JavaScript、CSS、图片等进行打包处理,以便在浏览器中高效地加载和运行。本教程将从零基础出发,帮助你逐步掌握Webpack的核心概念和使用...
5. **运行Webpack**:在开发过程中,运行Webpack的watch模式,以便在代码变动时自动编译。 6. **部署**:在生产环境,确保在构建流程中执行Webpack打包,生成的静态文件应与Django的静态文件路径一致。 **重要特性...
Webpack入门视频教程.txt 前端必备技能,助你快速掌握
首先,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它使得开发者可以在服务器端运行JavaScript代码。Node.js的版本8.9.4是一个稳定版本,提供了良好的性能和兼容性。安装Node.js通常通过访问其官方网站...
Webpack 是一个流行的前端构建工具,它能将各种前端资源(如JS、CSS、图片等)打包成静态资源,以便在浏览器中高效运行。Webpack4是Webpack的最新稳定版本,提供了许多改进和新特性,而Webpack4中文手册则是针对此...
webpack.config.jswebpack.config.js
本文旨在为初学者提供一个webpack的简单入门教程,通过对比传统的前端项目,展示webpack如何解决代码依赖管理和优化的问题。接下来,我们将逐步了解webpack的三个核心概念:拆分、打包和压缩。 ### 1. 传统项目中的...
通过这个Demo项目,开发者可以学习到如何将Three.js项目与现代前端构建工具Webpack结合,理解它们的协同工作原理,以及如何配置Webpack来优化Three.js应用的性能。此外,还可以了解到如何在实际项目中管理和组织代码...
本教程将深入探讨如何使用Webpack搭建一个基于TypeScript的Node.js开发环境。Webpack是一个模块打包工具,它能够处理JavaScript、CSS、图片等静态资源,而TypeScript是JavaScript的一个超集,提供静态类型系统,增强...
Webpack 是一个模块打包工具,它将 JavaScript 模块转换成静态资源,以便在浏览器中运行。`webpack.config.js` 文件是 Webpack 的核心配置文件,它定义了项目的输入、输出、加载器、插件等设置。这篇教程将带你了解...