[解決済み] Webpacked コードを外部から呼び出す (HTML script タグ)

質問内容

例えば、以下のようなクラス（typescriptで書かれている）をwebpackでバンドルするとします。 bundle.js .

export class EntryPoint {
    static run() {
        ...
    }
}

index.htmlにバンドルを含めて、その静的メソッドも呼び出したいと思います。

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

しかし EntryPoint はこの場合、未定義です。では、どのようにして他のスクリプトからバンドルされているjavascriptを呼び出せばよいのでしょうか？

追加 : Webpackの設定ファイル .

解決方法は？

webpackのバンドルを公開したいようです。 ライブラリ . グローバルコンテキストでライブラリを公開するように webpack を設定するには、次のような独自の変数を使用します。 EntryPoint .

私はTypeScriptを知らないので、この例では代わりにプレーンなJavaScriptを使っています。しかし、ここで重要なのは webpack の設定ファイルであり、特に output というセクションがあります。

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

そうすると、期待通りにライブラリのメソッドにアクセスできるようになります。

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

をチェックします。 要旨 を実際のコードで表示します。