Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。
使用
module: {
loaders: [
{
test: /\.css$/,
use: ['style-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
}
loader和plugin区别
loader是用来对模块的源代码进行转换,而插件目的在于解决 loader 无法实现的其他事。
plugin可以在任何阶段调用,能够跨Loader进一步加工Loader的输出,执行预先注册的回调,使用compilation对象做一些更底层的事情。
链式调用多个loader
当链式调用多个 loader 的时候，请记住它们会以相反的顺序执行。取决于数组写法格式，从右向左或者从下向上执行。
- 最后的 loader 最早调用，将会传入原始资源内容。
- 第一个 loader 最后调用，期望值是传出 JavaScript 和 source map（可选）。
- 中间的 loader 执行时，会传入前一个 loader 传出的结果。
webpack资源加载类似工作管道，可以使用多个loader，输出结果必须是标准的js代码
例子：
//webpack.config.js
{
test: /\.js/,
use: [
'bar-loader',
'foo-loader'
]
}
foo-loader 被传入原始资源，bar-loader 将接收 foo-loader 的产出，返回最终转化后的模块(js代码)和一个 source map（可选）
模拟loader实现
模拟一
loader 将会处理 .txt 文件，并且将任何实例中的 [name] 直接替换为 loader 选项中设置的 name。然后返回包含默认导出文本的 JavaScript 模块。
//src/loader.js
import { getOptions } from 'loader-utils';
export default function loader(source) {
const options = getOptions(this);
source = source.replace(/\[name\]/g, options.name);
return `export default ${ JSON.stringify(source) }`;
};
使用：
module: {
rules: [{
test: /\.txt$/,
use: {
loader: path.resolve(__dirname, '../src/loader.js'),
options: {
name: 'Alice'
}
}
}]
}
模拟二
模拟简单的style-loader的功能。
扫描二维码关注公众号，回复：
13055461 查看本文章
//将css插入到head标签内部
module.exports = function (source) {
let script = (`
let style = document.createElement("style");
style.innerText = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return script;
}
使用
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
参考https://www.webpackjs.com/contribute/writing-a-loader/
本文链接https://blog.csdn.net/qq_39903567/article/details/115334778