实现css-loader、less-loader、style-loader

最新推荐文章于 2023-02-17 21:50:34 发布

rookieLink

最新推荐文章于 2023-02-17 21:50:34 发布

阅读量842

点赞数 1

分类专栏： webpack系列文章标签： css-loader style-loader less-loader 手写webpack loader

本文链接：https://blog.csdn.net/zf2014122891/article/details/104565960

版权

本文介绍了如何手动配置webpack，包括使用less-loader处理less文件，css-loader转换CSS，以及style-loader将样式注入到DOM中。通过详细讲解less-loader.js、css-loader.js和style-loader.js的实现，以及展示webpack.config.js的配置，帮助读者理解webpack加载器的工作原理。

摘要由CSDN通过智能技术生成

less-loader

less-loader.js

let less = require('less');
function loader(source) {
   
    let css;
    less.render(source, function (err, r) {
    // r.css
        css = r.css;
    });
    return css;
}
module.exports = loader;

css-loader

css-loader.js

function loader(source) {
   
    let reg = /url\((.+?)\)/g;
    let pos = 0;
    let current;
    let arr = ['let list = [];'];
    while (current = reg.exec(source)) {
   
        let [matchUrl, g] = current;
        console.log(matchUrl, g);
        let last = reg