亲宝软件园·资讯

展开

style-loader为什么要使用pitch方法原理解析

Fantasy955 人气:0

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导出的内容中含有importrequire等语句,webpack会再次进行相关内容的导入,这方面的知识目前暂时不分析)

loader总结loader的作用是将准备导入的模块里面的内容转换成可以正常执行的js模块代码,转换后的内容会在运行时执行,以得到模块的导出内容或执行其他副作用代码。

pitch

为什么需要使用pitch?我们以css-loaderstyle-loader作为分析。

在只使用css-loader的情况下,假设我们有两个文件:index.cssindex.jsindex.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-loaderindex.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  {\r\n    font-size: 16px;\r\n    color: red;\r\n}", ""]);
// Exports
export 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.css

webpack发现返回的内容中有模块导入,然后使用路径中的loader去加载这个模块,并将其保存在内存中(多个文件引用同一个模块,目标模块只会被处理一次)。

总结

loaderpicher本质上都是改变目标文件的内容,让它变成符合js语法的代码,如果返回的内容有不存在的导入,则会再次执行导入。

webpack每个loader处理的结果都会生成单独的模块,但是在loader函数中,它无法之前使用了哪些loader,也无法知道已生成模块的名字,因此style-loader无法在loader函数中导入已经生成的模块。

pitch阶段可以获取到之后的loader顺序,实现起来也更加方便。

加载全部内容

相关教程
猜你喜欢
用户评论