简单的file-loader实现

最新推荐文章于 2024-04-29 19:17:14 发布

xiaoshunshi

最新推荐文章于 2024-04-29 19:17:14 发布

阅读量192

点赞数

分类专栏： js插件文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xiaoshunshi/article/details/125477854

版权

js插件专栏收录该内容

16 篇文章 0 订阅

订阅专栏

简单的file-loader实现

项目目录
webpack配置

resolveLoader的作用是先从全面的文件夹加载loader，如果找不到，再从node_modules里面找。
file-loader-copy

const { interpolateName } = require('loader-utils')
// 命名文件的方法

function loader (content, map, meta){
    const fileName = interpolateName(this,this.query.fileName,{content})
    this.emitFile(fileName,content)
    // 创建一个新的文件
    const resultContent = `module.exports = ${JSON.stringify(fileName)}`
    this.callback(null,resultContent)
    // 返回处理过的文件内容
    // return `module.exports = ${JSON.stringify(fileName)}`
}

loader.raw = true
// 让loader的content为buffer

module.exports = loader

app.js

const ImgSrc = require('./assets/ceshi.jpg')

const Img = document.createElement('img')
Img.src = ImgSrc
Img.width = 180

document.body.appendChild(Img)