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函数

Answer 2

也许尝试将type ='text / javascript'更改为type ='module'

如何使用Webpack导出功能并在HTML页面中使用它？

2 个答案: