欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack手写loader ---- style-loader

程序员文章站 2024-02-11 10:57:58
...
let loaderUtils = require("loader-utils");
//style-loader是接收less-loader过来的内容进行解析
function loader(source) {
    //组装成style格式的css
    let style = (`
        let style = document.createElement("style");
        style.innerHTML = ${JSON.stringify(source)};
        document.head.appendChild(style);
    `);
    return style;
}

//request是文件的请求路径,创建style标签,动态添加到head
loader.pitch = function (request) {
    let style = `
        var style = document.createElement("style");
        style.innerHTML = require(${loaderUtils.stringifyRequest(this, "!!" + request)});
        document.head.appendChild(style);
    `;
    return style;
};

module.exports = loader;