Question

这是我的问题。我有两个js文件：

hello.js：

function hello() {
    return "Hello World";
}
console.log(hello());

bye.js

function bye() {
    return "bye-bye";
}
console.log(bye());

我使用webpack构建了一个包。

现在我将捆绑文件放在html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="./src/bundle.js" type="text/javascript"></script>
    <!-- HERE --!>
</body>
    </html>

一切都很棒： - ）

但是，当我想在<script src="./src/bundle.js"... >

之后添加以下代码时，会出现问题

我补充说：

<script>
   hello();
</script>

我得到了错误：

未捕获的ReferenceError：未定义hello

我的理解是Webpack封装了构建bundle文件的函数。我想知道如何使用webpack，因此函数'hello'和'bye'将能够从bundle文件中导出，并在bundle文件之外重用。

Answer 1

将您的函数放在window对象上：

function hello() {
    return "Hello World";
}
console.log(hello());
window.hello = hello;

但请记住，这种方法很不寻常。如果使用Webpack，则应避免在窗口对象上设置值并在HTML文件中编写JavaScript文本。

Webpack：如何导出函数？

1 个答案: