如何使用webpack获取文件名和函数名

Question

我正在创建将在vuejs中使用的日志记录模块。 基本上，我希望该模块将调试行写入文件。

我需要包括的内容：

• 文件名
• 功能名称
• 行号，如果可能的话

因此，在使用原始JavaScript时，我实际上可以执行此操作。但是当webpack发挥作用时，一切都搞砸了-它打印出了已编译/编译的文件名，函数名称和行号。

当前，我使用它来打印文件名：

path.basename(__filename)

最坏的情况是我将对文件名和函数名进行硬编码：

logger('filename.vue', 'functionName()', 'log message') 

和记录器功能：

function logger (...args) {
 var date = new Date().toLocaleString()
 console.log (`[${date}] ` + `[${arguments[0]}]` + ` [${arguments[1]}] ` + arguments[2])
}

logger('filename.vue', 'functionName()', 'log message' + ' another string') 

但是我希望还有其他解决方案，包括自动确定调用者的文件名和函数名。

这是我的小提琴： https://jsfiddle.net/keechan/uxLjcgr2/

谢谢！