个人技术分享

vue3基础系列

Webpack ——一个用于 JavaScript 应用程序的模块打包工具（module bundler）。它的主要功能是将项目中的各种模块（如 JavaScript、CSS、图片等）打包成一个或多个静态文件，以便在浏览器中运行。Webpack 通过其强大的配置选项和插件系统，使得现代前端开发变得更加高效和灵活。

在Vue3中，响应式数据是构建动态UI的基石。Vue3引入了组合式API（即 Composition API），并提供了ref和reactive两个函数来创建响应式数据。本文将详细介绍ref和reactive的使用方法、适用场景、区别以及它们之间的联系。ref和reactive是Vue3中创建响应式数据的两个重要函数。它们各有特点，适用于不同的场景。通过深入理解它们的用法和区别，可以更加灵活地构建Vue3应用程序的响应式数据层。

vue3基础系列

样式预处理是在开发中会使用一些样式预编译语言，如scss,less等，在项目打包过程中再将这些语言转换为css，借助这些语言强大和便捷的特性，可以降低项目的开发和维护成本。下面是目前最主流的两种预编译语言是如何配置的。

网上搜了下发现原因不止一种，这里仅记录本人遇到的原因和解决办法，仅供参考。再次提示，这是本人遇到的，可能和大家有所不同，勿杠。

因为在webpack看来，项目中的所有资源皆为模块，通过分析模块间的依赖关系，在其内部构建出一个依赖图，最终编绎输出模块为 HTML、JavaScript、CSS 以及各种静态文件（图片、字体等），让我们的开发过程更加高效。4、编译模块：调用相应的loader对不同的文件做转换处理，在找出该模块依赖的模块，递归本操作，直到项目中依赖的所有模块都经过了本操作的编译处理。5、完成编译并输出：根据入口和模块之间的依赖关系，生成一个个chunk，根据output输出所有的chunk到相应的文件目录。

刚好最近学习了Vue和Webpack,回顾一下学习并对Vue的学习过程中对笔记总结进行记录,同时进行思考过程中的理解加入其中,方便自己进行后续的学习和回顾,当然因为这两个内容都和我之前在进行渗透测试中碰到的一种漏洞类型相关,其中很容易碰到资产是关于使用wepack进行打包的,并且存在js.map泄露,在源码泄露中,常见的前端是通过vue进行编写的,顺便加深一下之前渗透过程的印象.webpack是一个JavaScript应用程序的静态资源打包器。

侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听。顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据。// 2. 监听对象state 并开启deep。// 修改数据更新视图必须加上.value。// 2. 调用watch 侦听变化。// 2. 调用watch 侦听变化。// 2. 调用watch 侦听变化。// 执行函数 传入参数 变量接收。// 2. 监听对象state。// 直接修改不会引发回调执行。

所以，在前面的博客中，我们初始化了一个空的项目，当执行webpack打包时，需要先手动在src目录下创建一个index.js文件，这样在执行npm run build后，在dist的目录下生成了一个main.js文件，这个也验证了上面零配置打包规则的第1点和第2点。上述配置，指定了入口文件，同时指定了dist文件夹下输出的文件名为bundle.js，执行npm run build，会看到在dist文件下多了一个bundle.js文件。

hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变。此步骤非常简单，webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。chunk hash是根据所有chunk assets的内容生成的一个hash字符串。每个chunk都有一个模块记录,一个模块编译完了之后,会对依赖的模块继续进行编译(将多个chunk的assets合并到一起，并产生一个总的hash。

本章主要给大家讲解创建浅层响应式数据的 API, 即`shallowRef`, `shallowReactive`, `shallowReadonly`

hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变。此步骤非常简单，webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。chunk hash是根据所有chunk assets的内容生成的一个hash字符串。每个chunk都有一个模块记录,一个模块编译完了之后,会对依赖的模块继续进行编译(将多个chunk的assets合并到一起，并产生一个总的hash。

但 scope hoisting 的启用是有前提的，如果遇到某些模块多次被其他模块引用，或者使用了动态导入的模块，或者是非 ESM 的模块，都不会有 scope hoisting。在未开启 scope hoisting 时，webpack 会将每个模块的代码放置在一个独立的函数环境中，这样是为了保证模块的作用域互不干扰。scope hoisting 是 webpack 的内置优化，它是针对模块的优化，在生产环境打包时会自动开启。这样做的好处是减少了函数调用，对运行效率有一定提升，同时也降低了打包体积。

下面演示的是，将代码中的var处理成const。

所以，在前面的博客中，我们初始化了一个空的项目，当执行webpack打包时，需要先手动在src目录下创建一个index.js文件，这样在执行npm run build后，在dist的目录下生成了一个main.js文件，这个也验证了上面零配置打包规则的第1点和第2点。上述配置，指定了入口文件，同时指定了dist文件夹下输出的文件名为bundle.js，执行npm run build，会看到在dist文件下多了一个bundle.js文件。

Webpack及其Loader体系为我们提供了无限可能，但真正的力量在于如何灵活运用它们来解决实际问题。本文仅触及冰山一角，鼓励大家深入探索，结合项目实践，不断优化配置，提升开发效率与用户体验。你的每一次尝试，都是通往前端大师之路的坚实步伐。在不断变化的Web开发领域，保持好奇心，勇于实践，你将发现更多未知的宝藏。那么，你遇到过哪些Loader使用上的挑战？有哪些独特的解决方案？欢迎在评论区分享你的故事，让我们共同进步。欢迎来到我的博客，很高兴能够在这里和您见面！

【代码】Qt配置opencv库。

Webpack及其Loader体系为我们提供了无限可能，但真正的力量在于如何灵活运用它们来解决实际问题。本文仅触及冰山一角，鼓励大家深入探索，结合项目实践，不断优化配置，提升开发效率与用户体验。你的每一次尝试，都是通往前端大师之路的坚实步伐。在不断变化的Web开发领域，保持好奇心，勇于实践，你将发现更多未知的宝藏。那么，你遇到过哪些Loader使用上的挑战？有哪些独特的解决方案？欢迎在评论区分享你的故事，让我们共同进步。欢迎来到我的博客，很高兴能够在这里和您见面！

基于业务封装react-router-dom的Link组件