这篇文章主要介绍了style-loader使用pitch方法原理是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇style-loader使用pitch方法原理是什么文章都会有所收获，下面我们一起来看看吧。
loader
loader是一个函数，loader模块要默认导出该函数，同时这个函数上可以有pitch方法，webpack会执行这个pitch方法，pitch方法会影响webpack后续行为。
loader的作用是将源文件转化为可以执行的js模块，webpack会检查loader返回的这个模块是否是正确的，符合js模块化规范，如果有错误会终止打包。例如我定义了一个test.js模块，其默认导出一个函数：
test.js
module.exports = function (a, b) { return a+b;}然后定义一个test-loader，让其只会匹配test.js：
module.exports = function (content) { return `var a = {name: 'wjl'}; module.exports = a;`}test-loader返回了一段新的代码，默认导出一个对象，在index.js中我们导入test.js模块，尝试输出对象上的name属性，然后通过webpack打包：
const a = require('./test.js')console.log(a.name)打包结果为main.js，运行main.js可以正确得到输出。这说明webpack执行了var a = {name: 'wjl'}; module.exports = a;，test.js模块最终导出的内容为a。
当把test-loader的导出语句删除，改为以下内容时，能够正确通过webpack检查，但是index.js中不能访问导出对象了：
test-loader.js
module.exports = function (content) { // return `var a = {name: 'wjl'}; console.log(123); module.exports = a;` return `var a = {name: 'wjl'}; console.log(123);`}index.js
const a = require('./test.js')console.log(a, a.name)运行导出文件main.js得到
这是由于这个模块没有导出内容（对象上没有属性），test.js的模块代码会在运行时执行（输出123，cjs的模块需要执行完模块内容才能得到导出对象）。
（如果loader导出的内容中含有import或require等语句，webpack会再次进行相关内容的导入，这方面的知识目前暂时不分析）
loader总结：loader的作用是将准备导入的模块里面的内容转换成可以正常执行的js模块代码，转换后的内容会在运行时执行，以得到模块的导出内容或执行其他副作用代码。
pitch
为什么需要使用pitch？我们以css-loader和style-loader作为分析。
在只使用css-loader的情况下，假设我们有两个文件：index.css和index.js，index.css定义了一些样式，index.js导入了index.css：
index.css：
body { font-size: 16px; color: red;}index.js：
const style = require('./index.css')console.log(style);运行结果为：
css-loader将目标样式文件转换成一个js对象并导出了该对象，默认属性上有index.css文件的信息。
需要注意的是，这个对象是执行完css-loader转换的模块内容后得到的！我们先定义一个普通的my-style-loader根据调用顺序拿到css-loader的返回值:
my-style-loader:
module.exports = function (source) { console.log('*******************'); console.log(source); console.log('*******************'); return source;}css-loader将index.css模块转换为以下内容：
// Importsimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/noSourceMaps.js";import ___CSS_LOADER_API_IMPORT___ from "./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/api.js";var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);// Module___CSS_LOADER_EXPORT___.push([module.id, "body {\r\n font-size: 16px;\r\n color: red;\r\n}", ""]);// Exportsexport default ___CSS_LOADER_EXPORT___;也就是说，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语句，即：
require(`${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)}`)// !!./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/cjs.js!./index.csswebpack发现返回的内容中有模块导入，然后使用路径中的loader去加载这个模块，并将其保存在内存中（多个文件引用同一个模块，目标模块只会被处理一次）。
关于“style-loader使用pitch方法原理是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“style-loader使用pitch方法原理是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
