本文深入解析Webpack中Loader的核心机制，阐述其作为模块源代码转换函数的本质。详细对比Loader与Plugin的功能差异，介绍配置、内联及CLI三种使用方式。通过同步Loader示例及Webpack源码中的递归执行逻辑，揭示其类似Express中间件的执行流程，帮助开发者理解前端构建工具的内部工作原理。
Loader基本概念与定义
Loader概念
Loader本质上是一个函数，用于加载和处理各种形式的资源。它接收文件内容作为参数，并返回经过转换后的数据结构。
Loader的主要作用是对模块的源代码进行转换。在通过import语句或加载模块时，Loader可以对文件进行预处理。这类似于其他构建工具中的“任务(task)”，为前端构建步骤提供了强大的处理能力。例如，Loader可以将TypeScript等语言转换为JavaScript，将内联图像转换为data URL，甚至允许直接在JavaScript模块中导入CSS文件。
Loader与Plugin的区别
Loader和Plugin区别
在之前的文章中曾介绍过Plugin机制，它与本文讨论的Loader共同极大地拓展了Webpack的功能。两者的核心区别在于：Loader专注于对模块源代码进行转换，而Plugin旨在解决Loader无法覆盖的其他问题。之所以强调这一点，是因为Plugin可以在构建过程的任何阶段被调用，它能够跨Loader进一步加工Loader的输出。Plugin通过触发事件并执行预先注册的回调，利用compilation对象处理更底层的构建逻辑。
Loader的使用方式
Loader用法
配置
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader'
}
]
}
]
}
内联
import Styles from 'style-loader!css-loader?modules!./styles.css';CLI
webpack --module-bind 'css=style-loader!css-loader'上述三种使用方法的作用是将一组链式Loader按照从右往左的顺序执行，前一个Loader的返回值将作为下一个Loader的输入。例如，先使用css-loader解析@import和url()路径中指定的CSS内容，随后style-loader会将生成的CSS代码插入到页面的style标签中。
Loader的实现与原理
Loader实现
//将css插入到head标签内部
module.exports = function (source) {
let script = (`
let style = document.createElement("style");
style.innerText = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return script;
}
//使用方式1
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
//使用方式2
//将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可
上述示例展示了一个简单的Loader实现，采用同步方式执行，其功能相当于实现了style-loader的核心逻辑。
Loader原理
function iteratePitchingLoaders(options, loaderContext, callback) {
var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
// load loader module
loadLoader(currentLoaderObject, function(err) {
var fn = currentLoaderObject.pitch;
runSyncOrAsync(
fn,
loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
function(err) {
if(err) return callback(err);
var args = Array.prototype.slice.call(arguments, 1);
if(args.length > 0) {
loaderContext.loaderIndex--;
iterateNormalLoaders(options, loaderContext, args, callback);
} else {
iteratePitchingLoaders(options, loaderContext, callback);
}
}
);
});
}
以上代码展示了Webpack源码中Loader执行的关键步骤。Loader以递归方式执行，其执行流程类似于Express中间件机制。
参考源码
- webpack: "4.4.1"
- webpack-cli: "2.0.13"
参考文档 https://webpack.js.org/concepts/loaders/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。