style-loader使用pitch方法原理是什么 - 有用网在线工具,你的在线工具箱

这篇文章主要介绍了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

：

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

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

模块最终导出的内容为

。

当把

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

得到

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

这是由于这个模块没有导出内容（对象上没有属性），

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);

运行结果为：

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

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

模块转换为以下内容：

// Imports
import ___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  {
    font-size: 16px;
    color: red;
}", ""]);
// Exports
export default ___CSS_LOADER_EXPORT___;

也就是说，

index.css

里面的内容，还是要执行完

index.css

模块才能得到

使用

style-loader

的目的是往

document

中插入

style

标签，如果

style-loader

是一个普通

loader

的话，它需要执行

css-loader

返回的模块才能得到

css

样式，当然可以解析

css-loader

返回的模块内容，然后得到样式，然后返回创建

style

标签的相关语句，但是这样工作量太大了。而返回的模块中有

import