vue require 引入本地资源问题

Question

vue require 引入本地资源问题
this.player.start(
require("D:/Users/Desktop/ele/localDataDir/1658475904633/1658477490025.mp4")
);
let url = "D:/Users/Desktop/ele/localDataDir/1658475904633/1658477490025.mp4";
this.player.start(
require(url)
);
这两种写法有区别吗？为什么下面的引入报错，无法找到模块

现在打算做动态引入本地资源，本地资源路径已经拿到了，无法用require进行引入，还是说有其他可以做动态引入本地资源的方法

Answer 1

原因：
webpack本身是一个预编译路径 不能require纯变量的打包工具，无法预测未知变量路径
require(path) ,path 至少要有三部分组成, 目录,文件名和后缀
目录：webpack 才知道从哪里开始查找
后缀 文件后缀，必须要加上，不然会报错
文件名：可用变量表示

错误引用
上述意思即是不能通过以下这种方式加载图片，这种方式下，webpack找不到具体是哪个模块（图片）被引入，故而无法将图片hash并输出到dist文件下。
);

let imgUrlStr = '../images/a.png'; 
let imgUrl = require(imgUrlStr);

正确引用
鉴于require在纯变量的情况下找不到模块，所以我们至少要在require参数中写明一个目录（如下边代码中的example 2和example 3），这样的话，虽然不知道具体的模块，但是webpack也会为我们做些分析工作：
分析目录： ‘../images’
提取正则表达式 : ‘/^.*.png$/‘
但是此种情况下，webpack生成的上下文模块（context module）。它包含目录下的所有模块的引用，是通过一个 request 解析出来的正则表达式，去匹配目录下所有符合的模块，然后都 require 进来。此 context module 包含一个 map 对象，会把 request 中所有模块翻译成对应的模块 id。这意味着 webpack 能够支持动态地 require，但会导致所有可能用到的模块都包含在 bundle 中。

let imgName = 'a'; 
let imgAllName = 'a.png';

// example 1
let imgUrl = require('../images/a.png');                // 纯字符串
// example 2
let imgUrl = require('../images/' + imgAllName);        // 目录 + 文件全名
// example 3
let imgUrl = require('../images/' + imgName + '.png');  // 目录 + 文件名 + 后缀