webpackを使用して関数をエクスポートおよびバンドルし、htmlスクリプトタグ内で呼び出す

Question

私は非常に単純なことを試みてきました。webpackを使用して関数をエクスポートしてバンドル（およびbabelトランスパイル）してから、htmlページのスクリプトタグで呼び出します。

sample.js-webpackを使用してバンドルされています

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Webpack構成（バージョン= 4.44.1）

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

libraryとlibraryTargetターゲットをwebpackconfigに追加するのと同じくらい簡単でしたが、関数をとして呼び出すことができるはずMyLibrary.sampleFunctionExported1()です。

しかしMyLibrary、ブラウザコンソールで実行すると、次のように表示され、エラーがMyLibrary.sampleFunctionExported1()返され... is not a functionます

私はこれらの質問/回答の多くで提案に従いました：回答1、回答2、回答3、およびその他のさまざまなブログ投稿ですが、まったく機能しません。

ですから、多くの時間を費やした後、誰かが私に何が悪いのかを理解するのを手伝ってくれることを願って、ここに投稿しています。

編集1：これはwebpackバンドル後に生成されたファイルです：/public/js/sample.js

PS-entry2.js空のファイルであるため、ファイルを無視します。構成を表示するために追加しました。複数のエントリポイントがあると、現在直面しているこの問題が発生する可能性があるかどうかわからないためです。

Answer 1

エクスポート方法のため：

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

...MyLibrary変数は次のような形になります。

{
  default: function() { ... }
}

代わりに形を持たせたい場合：

{
  sampleFunctionExported1: function() { ... }
}

...デフォルトのエクスポートではなく、名前付きエクスポートを実行する必要があります。

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}