简单的file-loader实现

简单的file-loader实现

1. 项目目录
   

2. webpack配置
   
   resolveLoader的作用是先从全面的文件夹加载loader，如果找不到，再从node_modules里面找。

3. 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

4. app.js

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

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

document.body.appendChild(Img)