videojs-hlsjs icon indicating copy to clipboard operation
videojs-hlsjs copied to clipboard

Usage with webpack

Open jide opened this issue 8 years ago • 0 comments

Hey,

I'm coming from hell, which is trying to make videojs-contrib-hls work with webpack https://github.com/videojs/videojs-contrib-hls/issues/600, so I decided to give this module a try, and I was more lucky.

package.json should have a main entry pointing to the dist file, and in an ideal world dependencies to hls.js and video.js should be handled using the webpack standard factory function instead of relying on globals.

In the meantime, I thought I should put my working solution here :

npm i video.js@5
npm i videojs-hlsjs
npm i hlsjs.js
// webpack.config.js
{
  resolve: {
    alias: {
      'videojs-hlsjs': 'videojs-hlsjs/dist/videojs-hlsjs.js'
    },
  },

  plugins: [
    new webpack.ProvidePlugin({
      videojs: 'video.js',
      'window.videojs': 'video.js',
      'window.Hls': 'hls.js'
    })
  ]
}

jide avatar Oct 03 '17 10:10 jide