发表于: 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格式
}
评论