读这篇文章的朋友,请确保对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后...
04-Webpack入门到精通教程.pdf
Webpack 从零入门到工程化实战.rar
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入门视频教程.txt 前端必备技能,助你快速掌握
webpack.config.jswebpack.config.js
本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ,具有一定的参考价值,有兴趣的可以了解一席
webpack入门打包流程,带注释,供参考
Web前端模块化开发教程(ES6+Node.js+Webpack)_源代码.zip
webpack入门和实战(二):全面理解和运用loader和plugins,webpack-url-loader-master.
最近刚学的webpack3.0,从零到一套相对比较齐全的配置
webpack 经典笔记教程
webpack 3 零基础入门教程
webpack之代码打包分离-DllPlugin及DllReferencePlugin
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块...
bundle.js 到底是什么。 Webpack 版本:3.4.1 文件结构 // index.js import a from './a' import {b1, b2} from './b' console.log(`a: ${a.name}`) console.log(`b1: ${b1.name}; b2: ${b2.name}`) // a.js export ...
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 ...
一个简单的webpack4.x配置demo webpack4.x配置入门教程:https://blog.csdn.net/weixin_39291021/article/details/86569529
Webpack 入门教程,Webpack 入门教程,Webpack 入门教程
Vue.js与Webpack安装教程