javascript - 如何使用 Webpack 导出函数并在 HTML 页面中使用它？

Question

我有一个名为 index.js 的文件:

"use strict";

var $ = require("jquery");
window.jQuery = $;

export function foo() {
    console.log('hello world');
}

在同一个目录下，webpack-config.js:

module.exports = {
    entry: './index.js',
    output: {
        filename: './dist.js'
    },
    mode: "development"
};

最后，我有一个 index.html 文件，它加载我捆绑的 JavaScript，并尝试使用导出的函数定义...

<script src="/media/js/dist/dist.js"></script>
<script type='text/javascript'>
    foo();
</script>

当我运行 webpack 时，我没有看到输出错误。

但是当我加载我的 HTML 页面时，我看到:

(index):211 Uncaught ReferenceError: foo is not defined
   at (index):211

我做错了什么？ dist.js 文件加载正常。

Answer 1

将 library 属性添加到您的输出配置:

module.exports = {
    entry: './index.js',
    output: {
        filename: './dist.js',
        library: 'myLibrary'
    },
    mode: "development"
};

然后在 index.js 中，您应该能够像这样调用 foo():

myLibrary.foo();

要使其正常工作，foo() 函数使用export function 导出并且不 export default function 很重要