Как экспортировать функцию с 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

Answer 2

Возможно, попробуйте изменить type = 'text / javascript' на type = 'module'