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

问题描述

我正在处理一个项目 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>

这是我的示例/simple/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

感谢阅读和帮助:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html-webpack-plugin javascript webpack webpack webpack