webapck
文章平均质量分 67
Kinghiee
Front-end Developer
展开
-
webpack源码分析——loader-runner库之runLoaders函数
runLoaders 函数内分为“读取配置和变量初始化”、“初始化loader配置”、“初始化loaderContext对象”和“调用iteratePitchingLoaders函数”四个阶段。runLoaders 函数是loader-runner库导出的两个方法之一,它用来执行loader,对指定的文件进行“转义”\。dirname 函数(__dirname 的变体实现)parsePathQueryFragment 函数。原创 2024-04-24 10:56:21 · 428 阅读 · 1 评论 -
webpack源码分析——enhanced-resolve库之getType、normalize、join和cachedJoin函数
该函数通过传入的路径,判断并返回其类型值。返回的类型值为PathType中定义的值之一。该函数通过调用node的path.normalize方法规范化给定的 path。该函数在 join 函数的基础上加上缓存。注:什么是Posix?该函数进行路径进行拼接。原创 2024-04-19 19:56:52 · 1243 阅读 · 0 评论 -
webpack源码分析——enhanced-resolve库之cdUp函数
该函数寻找上层目录,每次调用函数时对输入的路径进行一次寻找上级目录。如果没有找到返回null。原创 2024-04-18 11:12:35 · 1137 阅读 · 0 评论 -
webpack源码分析——makeCacheable函数和weakMap的缓存应用场景
例如,在Web开发中,对于解析URL或处理文件路径等操作,使用缓存可以显著减少重复计算的开销,从而提高应用程序的响应速度和效率。通过将缓存绑定到特定的对象,可以确保缓存的生命周期与对象的生命周期相匹配,这有助于避免内存泄漏问题。如果提供了关联对象,fn 将尝试从缓存中获取结果,如果缓存中没有结果,它将调用 realFn 并将结果存储在缓存中。否则,它会创建一个新的 Map 对象,将其与对象关联,并返回它。该函数是将一个不带缓存的函数 realFn 转换成一个带缓存的版本。原创 2024-03-28 17:55:13 · 544 阅读 · 0 评论 -
webpack源码分析——truncateArgs函数
因为装不下所以输出内容,通过availableLength < arraySum(lengths.map(i => Math.min(i, 6))),判断发现可以装下args数组中前3项。如果lengths中长度超过6时按照6算,是为了实现在不充裕的界面可用长度下该字符最多显示的数量。该函数可以用于用户界面中的文本截断,确保长文本在有限的显示空间内能够适当显示,并且用户可以了解到部分文本已被省略。当多个参数时,truncateArgs 函数总是想着把多个参数内容,最大化输出到界面上,因此呈现如下规律。原创 2024-01-30 16:17:20 · 1098 阅读 · 0 评论 -
Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)
一、问题表述当我们想在vue页面通过import requestfrom '@client/utils/request’引入模块时,Vetur总是会提示Cannot find module ‘@xxxx’ or its corresponding type declarations。这样的错误,同时项目不能运行(如下图)。今天就解决以为这个问题。二、项目中为什么使用别名进行模块导入?如果使用相对导入(import myComponent from ‘…/…/…/components/myCompon原创 2021-12-26 11:56:45 · 47784 阅读 · 3 评论 -
webpackcli和webpack-dev-server兼容问题
项目配置"devDependencies": { "cross-env": "^7.0.3", "html-webpack-plugin": "^5.2.0", "ts-loader": "^8.0.17", "webpack": "^5.23.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" }当使用官方给出方式启动webpack-dev-server时会报错,node:in原创 2021-02-22 09:39:34 · 3020 阅读 · 3 评论 -
Webpack学习笔记——CommonJS与ES6 Module的区别之动态与静态和值拷贝与动态映射
动态与静态CommonJS与ES6 Module最本质的区别在于CommonJS对模块依赖的解决是“动态的”而ES6 Module是“静态的”。在这里“动态的”含义是,模块依赖关系的建立发生在代码运行阶段;而“静态”则是模块依赖关系的建立发生在代码编译阶段接下来举例说明一下commonJS例子B文件//calculator.jsmodule.exports={name:"calcula...原创 2020-01-11 19:25:40 · 2014 阅读 · 3 评论