1、步骤
- 1、创建 custom-loader.js，这个模块导出一个函数，这个函数接收源文件作为参数，并返回转换后的内容。
module.exports = function(source) {
// 将源文件转换为大写
const upperCaseContent = source.toUpperCase();
// 返回转换后的内容，并告诉Webpack使用自己的schema
this.callback(null, upperCaseContent);
};
- 配置webpack，以便识别你的自定义loader
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.txt$/, // 匹配所有.txt文件
use: [
'raw-loader', // 可以使用现有的loader处理源文件
'./path/to/custom-loader.js' // 使用自定义loader
]
}
]
}
// ...
};
也可以直接通过命令行创建
npx create-new-webpack-app loader ./my-loader --template=default
2、less-loader
- webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
// 这里可以配置less-loader的选项
},
},
],
},
],
},
// ...
};
- 源码地址 github.com/webpack-con…
- 核心代码 less-loader/lib/index.js
module.exports = function(content) {
// 使用less编译内容
const less = require('less');
const callback = this.async();
less.render(content, {
// 这里可以配置less的选项
}, (error, output) => {
if (error) {
return callback(error);
}
callback(null, output.css);
});
};
module.exports.raw = true;
3、css-loader
-
核心功能：“postcss-import-parser”，“postcss-url-parser”，这两个插件一个用来处理@import ，另外一个用来处理url()
-
postcss用法 postcss.docschina.org/doc/guideli…
4、style-loader
- 源码地址 github.com/webpack-con…
- 核心功能：
- 它将CSS模块作为style标签插入到当前的DOM中。
- style-loader源码简化版
const { getOptions } = require('loader-utils');
const validateOptions = require('schema-utils');
// 定义schema验证，确保loader接收到的options是有效的
const schema = {
type: 'object',
properties: {
injectType: {
type: 'string',
},
// 其他options...
},
};
module.exports = function(content) {
const options = getOptions(this) || {};
validateOptions(schema, options, 'Style Loader');
// 生成style标签的HTML字符串
const code = `
var styles = document.createElement('style');
var code = document.createTextNode(${JSON.stringify(content)});
styles.type = 'text/css';
styles.appendChild(code);
document.head.appendChild(styles);
`;
// 返回JavaScript模块代码
return this.callback(null, code);
};
最后
欢迎关注我的前端自检清单，我和你一起成长
