写在前面
工作刚满一年,也停更了一年多。时间总是不等人的,一年的时间收获颇多,感想也颇多。怎么说呢,人大概就是这样吧,总是在当下幻想未来、怀念过去。走走停停,最后发现,现在就是最好的时刻。写写最近的感受吧,先提前提醒一下欧,有些感概(但是也不是特别伤感,是反省~~~~)。
自己确实不是很自律,现在回头看,很后悔当初没有在合适的时间做合适的事情,虚度了不少光影。没办法啊,因为人总是懒惰的,惰性感很强啊。但是,不是还有句话叫:开始就不算晚,一切都还来得及。是的,一切都还来得及。
2020 年疫情开始,现在已经 2022 年,时间过的很快,也很慢。最近几天,因为疫情的原因,一直在居家,所以想了很多有的没的,仔细回顾了过去的三年时间,发现自己的心态变了很多。性格依然没变,最大的变化是控制情绪的能力变差了,需要慢慢调整心态,静静心。
另外,今天有关 mu5735 航班的消息太突然,又一次提醒我们:明天和意外哪一个先来是未知的。真的真的真的,需要把握好眼前的时间,不需要太努力,不需要有多大的目标,简单的顺其自然,最后自然会水到渠成。
2022 年,我想,该拾起封藏很久的那颗初心,重新出发了!
不需要时时刻刻提醒,只需要偶尔停下来,跟自己对话,同自己相处,让自己调整到最舒服方式的状态,然后继续出发。
过渡
上面随便写了一下,最近的感受。也许是太久没有做自我总结了,总会有一些前言不着后调的。我随便写写,大家就随便看看。但是不能不看哇,毕竟还得看技术内容啊。
很多东西,都记在脑子里,加上平时用的少就太容易忘记了。最近,在做知识总结进行复习,能记录一点是一点吧。
最近在复习 webpack,所以就写有关 webpack 的基础知识吧。
webpack
关于 webpack,很多童鞋应该不陌生。它是前端工程化的一个构建工具,给开发者带来了极大的便利。因为 webpack 的出现,让开发者只需要关注具体的业务功能。比如,webpack 把浏览器的兼容性、ES6 7 8 语法的兼容性等非业务功能部分都已经完成。通俗点说就是,开发者在进行开发时,不需要考虑各种代码的兼容性问题,怎么好用、怎么方便怎么来。
首先,看个图:
图中有三个部分:
- 左侧:源码部分。可理解成,项目的各个模块、图片、页面等资源。项目最终不会运行这部分代码。
- 中间:就是今天的主角 —— webpack。它可以打包编译源码部分。webpack 编译运行的环境是 Node 环境。因为 webpack 不仅在浏览器端可用,在服务端也可用。
- 右侧:webpack 对源码的打包结果。项目最终运行的代码。
webpack 配置文件
webpack 有自己的配置文件:webpack.config.js
。用于配置 webpack 编译打包生成的结果。
该配置文件是会在 webpack 编译打包过程中运行,意味着:该文件中的语法要使用 commonJS
。
webpack.config.js
配置文件:默认导出一个配置对象
module.exports = {
mode: "development",
entry: "./src/index.js", // 打包时的入口文件
output: {
filename: "main.js", // 打包结果的输出文件名:dist 目录下的文件
},
devtool: '', // 使用源码地图 source map,目的是便于调试 精准定位代码报错的源代码模块位置
}
webpack 编译结果浅析
首先需要明确的是:
- webpack 解决了全局变量污染问题:支持模块化(commonJS 和 ES6 模块化);
- webpack 支持 commonJS 和 ES6 模块化两种模块化格式的使用,这里只分析了 commonJS 的使用方式;
- webpack 中的模块具有缓存机制,即多次同时导入同一个模块,该模块只会执行一次。
编译结果分析
-
commonJS 的模块化使用包含两部分:
require(module_url)
导入模块,module.exports
导出模块; -
require(module_url)
导入模块对于路径的模块,一个模块对应一个文件。模块路径是唯一的,作为模块的 ID。- 模块导入时,先会判断导入的模块是否已经缓存过,如果存在缓存则之间返回缓存结果;
- 否则,会先把模块内的代码先执行一遍,然后缓存已导入的模块;
-
关于
module.exports
和exports
,本质上导出的内容就是module.exports
,exports
是的module.exports
引用结果。
总的来说,其实就是实现 require 方法、模块缓存。同时,模块内的代码不会污染全局代码,即可使用立即执行函数实现。
简单还原 webpack 的编译结果:
/**
* webpack 的编译原理
* 采用立即执行函数:避免全局变量的污染
*/
(function (module) {
// 模块缓存机制
var module_cache = {};
// 导入函数
function require(moduleId) {
// 模块存在缓存,则直接返回缓存结果
if (module_cache[moduleId]) {
return module_cache[moduleId];
}
// 当前模块无缓存,运行当前模块
module_cache[moduleId] = {};
// require 导出的数据格式
var module_webpack = {
exports: {},
};
// 执行当前模块模块
module[moduleId](module_webpack, module_webpack.exports, require);
module_cache[moduleId] = module[moduleId]; // 缓存模块
return module_webpack.exports; // 返回导出结果
}
// 运行入口模块
require('./src/index.js');
})({
"./src/a.js": function (module, exprots, require) {
const b = require('./src/b.js');
console.log('module a');
console.log('require b: ', b);
},
"./src/b.js": function (module, exprots, require) {
module.exports = 'module b'
console.log('module b');
},
"./src/index.js": function (module, exprots, require) {
require('./src/a.js')
require('./src/a.js')
require('./src/a.js')
require('./src/a.js')
require('./src/a.js')
require('./src/a.js')
console.log('main.js')
}
})