html-webpack-plugin - 脚本注入问题

Question

我正在开发一个项目voplayer ，我需要一个带热重载的开发模式。 我的项目是关于一个视频播放器，为了测试我的库，我使用了一个基本的 index.html 包含一个视频标签（它还包括一个脚本 index.js 来使用我的库）。

这是我的问题：如果我添加一个脚本标签，例如<script src="voplayer.js"></script>它工作正常。

但是没有热重载的可能性。 这就是为什么我想使用html-webpack-plugin来动态构建我的库并将其注入到我的 index.html 文件中。

这是我的 webpack.config.js：

const path = require("path");
 
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
 
 
module.exports = {
  entry: "./index.ts",
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, '/'),
    // historyApiFallback: {
    //  rewrites : [ { from: /.*/, to: 'index.html' } ],
    // },
    compress: true,
    hot : true,
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /(node_module)/
      }
    ]
  },
  resolve: { 
    extensions: ['.tsx', '.ts', '.js'], 
    fallback : {
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/")
    }
  },
  output: {
    path: __dirname + '/dist',
    filename: 'voplayer.js',
    library: 'voplayer',
    libraryTarget: 'umd',
    umdNamedDefine: true

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'samples/simple/index-template.html',
      inject: true
    })
  ]
};

这是我的基本示例/simple/index-template.html：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'/>
  <title>voplayer.js example</title>

  <!-- built files will be auto injected -->

  <style>
    video {
      width: 1280px;
      height: 720px;
    }
  </style>
  
  </head>
  <body>
    <p>Hello</p>
    <div id='player' style='position: relative;'>
      <video controls autoplay></video>
    </div>
  </body>
  <script src="index.js"></script>
</html>

这是我的示例/简单/index.js：

var video,
player = null;


function init() {

    video = document.querySelector('video'); 
    player = new voplayer.Player(video);
    player.load({
        url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd'
    });
} 


document.addEventListener('DOMContentLoaded', function () {
    init();
    });

html-webpack-plugin将我的库注入到 index.html 文件中，但出现以下错误：

1beeb78b6bd26fc3d015.js:6 Uncaught TypeError: voplayer.Player is not a constructor
    at init (1beeb78b6bd26fc3d015.js:6)
    at HTMLDocument.<anonymous> (1beeb78b6bd26fc3d015.js:13)

（ 1beeb78b6bd26fc3d015.js指的是 index.js）

这是html-webpack-plugin生成的index.html，可以看到voplayer.js被注入。

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'/>
  <title>voplayer.js example</title>

  <!-- <script src='../../dist/voplayer.js'></script> -->
  <!-- built files will be auto injected -->

  <style>
    video {
      width: 1280px;
      height: 720px;
    }
  </style>
  
  <script defer src="voplayer.js"></script>
</head>
  <body>
    <p>Hello</p>
    <div id='player' style='position: relative;'>
      <video controls autoplay></video>
    </div>
  </body>
  <script src="1beeb78b6bd26fc3d015.js"></script>
</html>

如果我比较注入的 voplayer.js，他的大小为 2.60 Mb，而我构建的 voplayer.js 为 660 kb。

我究竟做错了什么？

编辑

这是我的存储库（没有节点模块^^）

.
├── README.md
├── dist
│   ├── df9b96316665542ddd95.js
│   ├── index.html
│   ├── voplayer.js
│   └── voplayer.js.LICENSE.txt
├── index.js
├── index.ts
├── lib
│   ├── index.d.ts
│   └── src
│       ├── AppleNativePlayer.d.ts
│       ├── DashJSPlayer.d.ts
│       ├── HlsJSPlayer.d.ts
│       ├── IPlayer.d.ts
│       ├── Player.d.ts
│       ├── TizenPlayer.d.ts
│       ├── Types.d.ts
│       ├── core
│       └── manager
├── package-lock.json
├── package.json
├── samples
│   └── simple
│       ├── index-template.html
│       └── index.js
├── src
│   ├── Player.ts
│   ├── Types.ts
│   ├── core
│   │   ├── ICorePlayer.ts
│   │   ├── apple
│   │   ├── dashjs
│   │   └── hlsjs
│   └── manager
│       ├── AdManager.ts
│       └── VOTextManager.ts
├── tsconfig.json
├── tslint.json
├── webpack
└── webpack.config.js

感谢阅读和帮助：）