html-webpack-plugin – problem of script injection

  html-webpack-plugin, javascript, webpack

I’m working on a project voplayer and I need a dev mode with hot reloading. My project is about a video player and in order to test my library, I use a basic index.html containing a video tag (and it includes also a script index.js to use my library).

Here is my problem : if I add a script tag such as <script src="voplayer.js"></script> it works fine.

But there is no possibility for hot reloading. That’s why I want to use html-webpack-plugin to dynamically build my library and inject it into my index.html file.

Here is my 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
    })
  ]
};

And here is my basic samples/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>

And here is my samples/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 injects my library into the index.html file but I get the following error :

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

(1beeb78b6bd26fc3d015.jsis reffering to index.js)

This is index.html produced by html-webpack-plugin, as you can see voplayer.js is injected.

<!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>

If I compare the injected voplayer.js, his size is 2.60 Mb against 660 kb for my build voplayer.js.

What am I doing wrong?

Thanks for reading and helping 🙂

Source: Ask Javascript Questions

LEAVE A COMMENT