发表于: 2020-08-18 20:25:23

2 1890


今天练习了一下loader 处理样式和图片

 

webpack.config.js配置文件

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.(png)|(jpg)$/,
            use: ["./loaders/img-loaders.js"]
        }]
    }

}


chunk

const src = require('./assets/webpack.png');

let oImg = document.createElement('img');
oImg.src = src;

document.body.appendChild(oImg);


loader处理js

function loader(buffer) {
    const bs64 = toBase64(buffer);
    return `module.exports=\`${bs64}\``; //其他文件如果需要导入,这里要导出 不写成字符串会在编译时触发
}
loader.raw = true; //要处理的是原始数据

module.exports = loader;

function toBase64(buffer) {
    return "data:image/png;base64," + buffer.toString("base64");//转为base64格式
}




返回列表 返回列表
评论

    分享到