Javascript 未捕获引用错误-如何访问Web包绑定的功能

我正在为一个项目使用，我正在尝试向一个js文件添加一个javascript函数，该文件由webpack绑定并从html访问。我想我错过了一些基本的东西

背景的源文件：

我正在向plugins.js添加以下代码：

function foo () {
    console.log('bar')
}

并尝试从html文档中调用它进行测试，如下所示

<script type="text/javascript">
    foo();
</script>

foo（）；

我可以看到我的函数被捆绑，但我无法访问它。

下面是我得到的错误：

我已经不得不将expose loader添加到我的webpack.config.js中，以使jquery按照以下方式工作：

---

根据我的经验，当我使用Webpack时，我将代码捆绑到模块中，模块将它们封装到该模块的范围内。我希望在模块外可用的代码，我显式地导出，然后导入或要求将其放入我希望访问它的新范围

听起来您希望您的一些代码可以在全局范围内访问，直接从标记访问它。要在浏览器中执行此操作，最好将其直接附加到

窗口

对象。可能首先检查以确保您没有覆盖该命名空间中已存在的内容：

function foo() {
    console.log('bar!');
}

if (!Window.foo) {
    Window.foo = foo;
} else {
    console.warn('Foo is already assigned!');
}

也就是说，我建议您避免以这种方式进行开发——污染全局名称空间通常不是一种很好的模式，并且会导致许多潜在的冲突。如果必须以这种方式工作，请至少将一个对象分配给附加到

窗口的命名空间，在该命名空间中，您可以放置应用程序功能，而不会与其他
窗口
属性发生冲突：

Window.myApp = {
    foo: function () {
        console.log('bar!');
    }
}

Window.myApp.printGreeting = function () {
    console.log('Hello!');
}

// ...etc

我不知道如何让ES6语法在文件中工作，一直遇到以下错误：

这里有一个基于此的解决方法
感谢您的快速回复。我很高兴定义一个模块。我被困在语法上了。一个只有一个函数记录一行的简单模块看起来像什么？然后如何导入它？特别是，webpack正在生成一个带有散列的JS文件，因此我不确定从中输入什么，例如“import Module from”@sshevlyagin-这取决于您使用的是ES6语法还是节点模块语法。如果您使用的是ES6，您应该查看MDN上的和页面。通常，我会说，如果您仅从模块导出单个函数，则可以使用
export default myFunction
。然后它可以是
import
edw/您想要的任何名称：
importthefunction from./../someFolder/myFunction'
。谢谢。我做了更多的实验，看起来这个网页设置我添加东西的js文件的方式需要jquery。我将在jquery中发布我是如何解决这个问题的。