Javascript 使用webpack导出和绑定函数并在html脚本标记内调用它

我一直在尝试一些非常简单的方法——使用webpack导出和绑定（以及babel transpiling）一个函数，然后在html页面的脚本标记中调用它

sample.js-使用webpack捆绑

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

网页包配置（版本=4.44.1）

我认为将

库

和

libraryTarget

目标添加到webpack config就很容易了，然后我应该能够调用我的函数作为

MyLibrary.sampleFunctionExported1（）

但是当我在浏览器控制台中执行

MyLibrary

时，它显示如下，并且

MyLibrary.sampleFunctionExported1（）

返回

。。。不是一个函数

错误

我在许多问题/答案中都遵循了建议：，以及其他各种博客帖子，但这对我来说根本不起作用

所以，在花了这么多时间之后，我把它贴在这里，希望有人能帮助我理解什么是错的

编辑1: 以下是打包后生成的文件：

---

注意-忽略

entry2.js

文件，因为它是一个空文件，我只是添加它来显示我的配置，因为我不确定有多个入口点是否会导致我目前面临的问题。

因为您的导出方式：

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

…您的

MyLibrary

变量将具有以下形状：

{
  default: function() { ... }
}

{
  sampleFunctionExported1: function() { ... }
}

如果您希望它具有以下形状：

{
  default: function() { ... }
}

{
  sampleFunctionExported1: function() { ... }
}

…您需要执行命名导出，而不是默认导出：

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}

---

MyLibrary.default是否存在？我想只有当您将其作为命名导出而不是默认导出时，
MyLibrary.sampleFunctionExported1才会出现。您可以在此处或作为要点共享传输的
。/public/js/sample.js
？可能有助于诊断。FWIW，在过去，我经常以umd为目标，他们。。。似乎有效。。。经过一些调整。@Jacob-实际上我注意到MyLibrary不是一个空对象，它有
default
存在，但我的函数调用仍然返回未定义的错误（我用MyLibrary对象pic更新了我的问题）将代码粘贴到浏览器中，它似乎
MyLibrary.default（）
调用了您想要的函数。哪个。。。有道理，因为它是默认导出…如果要使用命名函数，可能需要删除默认关键字，ie
MyLibrary.sampleFunctionExported1（）