style-loader使用pitch方法原理是什么

这篇文章主要介绍了style-loader使用pitch方法原理是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇style-loader使用pitch方法原理是什么文章都会有所收获，下面我们一起来看看吧。loader是一个函数，loader模块要默认导出该函数，同时这个函数上可以有pitch方法，webpack会执行这个pitch方法，pitch方法会影响webpack后续行为。loader的作用是将源文件转化为可以执行的js模块，webpack会检查loader返回的这个模块是否是正确的，符合js模块化规范，如果有错误会终止打包。例如我定义了一个test.js模块，其默认导出一个函数：test.js然后定义一个test-loader，让其只会匹配test.js：test-loader返回了一段新的代码，默认导出一个对象，在index.js中我们导入test.js模块，尝试输出对象上的name属性，然后通过webpack打包：打包结果为main.js，运行main.js可以正确得到输出。这说明webpack执行了var a = {name: 'wjl'}; module.exports = a;，test.js模块最终导出的内容为a。当把test-loader的导出语句删除，改为以下内容时，能够正确通过webpack检查，但是index.js中不能访问导出对象了：test-loader.jsindex.js运行导出文件main.js得到这是由于这个模块没有导出内容（对象上没有属性），test.js的模块代码会在运行时执行（输出123，cjs的模块需要执行完模块内容才能得到导出对象）。（如果loader导出的内容中含有import或require等语句，webpack会再次进行相关内容的导入，这方面的知识目前暂时不分析）loader总结：loader的作用是将准备导入的模块里面的内容转换成可以正常执行的js模块代码，转换后的内容会在运行时执行，以得到模块的导出内容或执行其他副作用代码。为免费云主机域名什么需要使用pitch？我们以css-loader和style-loader作为分析。在只使用css-loader的情况下，假设我们有两个文件：index.css和index.js，index.css定义了一些样式，index.js导入了index.css：index.css：index.js：运行结果为：css-loader将目标样式文件转换成一个js对象并导出了该对象，默认属性上有index.css文件的信息。需要注意的是，这个对象是执行完css-loader转换的模块内容后得到的！我们先定义一个普通的my-style-loader根据调用顺序拿到css-loader的返回值:my-style-loader:css-loader将index.css模块转换为以下内容：也就是说，index.css里面的内容，还是要执行完index.css模块才能得到使用style-loader的目的是往document中插入style标签，如果style-loader是一个普通loader的话，它需要执行css-loader返回的模块才能得到css样式，当然可以解析css-loader返回的模块内容，然后得到样式，然后返回创建style标签的相关语句，但是这样工作量太大了。而返回的模块中有import相关的语句时，webpack还会加载那些import的内容，但是例如./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/api.js是会被webpack最终打包生成的模块，在nodejs环境中是无法得到的。打包产物：一个模块加载（import ‘!!xxxx-loader!./index.css’）被webpack打包之后会添加到module map里面，键就是请求路径。style-loader的思路就是，得到css-loader的模块内容，然后再将模块内容插入到style标签中，再将style标签插入文档中。为了得到css-loader处理后的内容（需要能被执行），style-loader构造了一个新的require语句，即：webpack发现返回的内容中有模块导入，然后使用路径中的loader去加载这个模块，并将其保存在内存中（多个文件引用同一个模块，目标模块只会被处理一次）。关于“style-loader使用pitch方法原理是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“style-loader使用pitch方法原理是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: python双向链表怎么实现

这篇文章主要介绍“python双向链表怎么实现”，在日常操作中，相信很多人在python双向链表怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”python双向链表怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！…