vue中自己编写一个loader

以一个解析pdf的loader为例

首先在vue.config.js添加rule解析规则，

1、test表示要解析的文件类型为pdf文件。

2、use表示要使用的loader的位置，如果是通过npm安装的loader插件则不需要写绝对路径(如file-loader)，但是如下图中的自己写的myloader.js，需要标明绝对路径(可以通过node中的path模块获取绝对路径)。

 然后则是编写loader文件，提供解析规则，以下是myLoader.js文件的全部内容

// 解析规则，当目标文件为非js文件时，source为文件流
module.exports = function (source) {
  // 通过node提供的Buffer.from方法将文件流解析成base64
  let base64Str = Buffer.from(source, 'binary').toString('base64');
  // 最终该结果会以js的方式返回给浏览器，因此这里返回的结果是js代码的字符串
  // 使用export default，import引入的位置才能获取到解析值
  return `export default "${base64Str}"`
}

配置好以上内容后，我们通过在项目中引入pdf文件测试一下效果

// 在项目中引入pdf文件
import pdf from './test.pdf'
console.log('pdf内容为——', pdf)

可以看到下图成功输出了base64的pdf内容