htmlのscriptタグで、Javascript ES6 + Webpack でコンパイル＆結合したJSファイルの変数・クラスを呼び出す方法が分からない

Question

Javascript ES6で複数のjsファイルで変数やクラスを定義し、webpackでES5に変換して1つのjsファイルに結合した場合ですが、htmlのscriptタグでその変数やクラスを呼び出す（使う）方法が見つからず、困っています。。
少なくとも、<script src="～" />でインポートしてもグローバル変数（window）には見当たりませんでした。また、modules、exportsのような変数も作られていませんでした。

ES6 + Webpack の実装例を調べてみても、Reactのようにそれ単体で動作する（外部から変数やクラス、メソッドを個別に呼び出して実行するタイプでない）ものばかりで、そのため、基本的にhtmlではjsファイルをインポートするのみで、変数やクラスをscriptタグで呼び出している例が全く見つかりませんでした。

Webpackで結合した場合、各jsファイルで定義した変数やクラスはグローバル変数に出力されず、htmlのscriptタグ等（外部）で呼び出すことはできないのでしょうか。

どなたか、少しでも情報がございましたら、ご回答いただけると大変助かります。
何卒、よろしくお願いいたします。

---

src/TestUtils.js

export default class TestUtils {

}

src/Test.js

import ImageUtils from 'TestUtils'

export default class Test {

}

gulpfile.js（一部）

const gulp = require('gulp'),
      gulp_webpack = require('gulp-webpack');

gulp.task("js", () => {
  return gulp.src('src/**/*.js')
    .pipe(gulp_webpack({
      watch: true,
      output: { filename: 'test.js' },
      module: {
        loaders: [
          {
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          }
        ]
      }
    }))
    .pipe(gulp.dest(''));
});

index.html

<script src="test.js"></script>
<script>
  // <![CDATA[
    new Test();
  // ]]>
</script>

期待する動作

上記で、index.htmlからTestクラスを呼び出せること

Answer 1

Webpackで結合した場合、各jsファイルで定義した変数やクラスはグローバル変数に出力されず、htmlのscriptタグ等（外部）で呼び出すことはできないのでしょうか。

はい、そのままではローカル変数となってしまって、Webpack外部から使うことはできません。なので、自分でwindow.Test = Testのように、windowのプロパティとして代入することでエクスポートしておく必要があります。

Comments

[kanata_x2]

ご回答ありがとうございます。自分でwindowのプロパティにセットすることでグローバル変数に出力できることを確認しました。
CoffeeScriptではこのような形でグローバル変数に出力していましたが、ES6＋webpackを使ってもそこは自動化されず、同じだったんですね。。