docs: add a Webpack usage guide (#4261)

docs/guides/faq.md

@@ -268,67 +268,68 @@ Yes! Please [submit an issue or open a pull request][pr-issue-question] if this
 
 Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
 
-Be sure to use `require('!style-loader!css-loader!video.js/dist/video-js.css')` to inject video.js CSS.
+We have a short guide that deals with small configurations that you will need to do. [Webpack and Videojs Configuration][webpack-guide].
 
 ## Q: Does video.js work with react?
 
 Yes! See [ReactJS integration example][react-guide].
 
-[reduced-test-case]: https://css-tricks.com/reduced-test-cases/
-
-[react-guide]: /docs/guides/react.md
+[ads]: https://github.com/videojs/videojs-contrib-ads
 
-[plugin-guide]: /docs/guides/plugins.md
+[audio-tracks]: /docs/guides/audio-tracks.md
 
-[install-guide]: http://videojs.com/getting-started/
+[contributing-issues]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#filing-issues
 
-[troubleshooting]: /docs/guides/troubleshooting.md
+[contributing-prs]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#contributing-code
 
-[video-tracks]: /docs/guides/video-tracks.md
+[dash]: http://github.com/videojs/videojs-contrib-dash
 
-[audio-tracks]: /docs/guides/audio-tracks.md
+[debug-guide]: /docs/guides/debugging.md
 
-[text-tracks]: /docs/guides/text-tracks.md
+[eme]: https://github.com/videojs/videojs-contrib-eme
 
-[debug-guide]: /docs/guides/debugging.md
+[flash]: https://github.com/videojs/videojs-flash
 
-[pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
+[generator]: https://github.com/videojs/generator-videojs-plugin
 
 [hls]: http://github.com/videojs/videojs-contrib-hls
 
-[flash]: https://github.com/videojs/videojs-flash
-
-[dash]: http://github.com/videojs/videojs-contrib-dash
+[install-guide]: http://videojs.com/getting-started/
 
-[eme]: https://github.com/videojs/videojs-contrib-eme
+[issue-template]: http://github.com/videojs/video.js/blob/master/.github/ISSUE_TEMPLATE.md
 
-[generator]: https://github.com/videojs/generator-videojs-plugin
+[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
 
-[youtube]: https://github.com/videojs/videojs-youtube
+[plugin-guide]: /docs/guides/plugins.md
 
-[vimeo]: https://github.com/videojs/videojs-vimeo
+[plugin-list]: http://videojs.com/plugins
 
-[ads]: https://github.com/videojs/videojs-contrib-ads
+[pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
 
 [pr-template]: http://github.com/videojs/video.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md
 
-[issue-template]: http://github.com/videojs/video.js/blob/master/.github/ISSUE_TEMPLATE.md
+[react-guide]: /docs/guides/react.md
 
-[plugin-list]: http://videojs.com/plugins
+[reduced-test-case]: https://css-tricks.com/reduced-test-cases/
+
+[semver]: http://semver.org/
 
 [skins-list]: https://github.com/videojs/video.js/wiki/Skins
 
-[contributing-issues]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#filing-issues
+[starter-example]: http://jsbin.com/axedog/edit?html,output
 
-[contributing-prs]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#contributing-code
+[text-tracks]: /docs/guides/text-tracks.md
 
-[vjs-issues]: https://github.com/videojs/video.js/issues
+[troubleshooting]: /docs/guides/troubleshooting.md
 
-[vjs-prs]: https://github.com/videojs/video.js/pulls
+[video-tracks]: /docs/guides/video-tracks.md
 
-[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
+[vimeo]: https://github.com/videojs/videojs-vimeo
 
-[semver]: http://semver.org/
+[vjs-issues]: https://github.com/videojs/video.js/issues
 
-[starter-example]: http://jsbin.com/axedog/edit?html,output
+[vjs-prs]: https://github.com/videojs/video.js/pulls
+
+[webpack-guide]: /docs/guides/webpack.md
 
+[youtube]: https://github.com/videojs/videojs-youtube

docs/guides/webpack.md

@@ -0,0 +1,37 @@
+# Using Webpack with Video.js
+
+video.js, and the playback technologies such as videojs-contrib-hls all work in a Webpack based build environment. Here are several configuration changes specific to Webpack that will get you up and running.
+
+## Video.js CSS:
+To add the CSS that the player requires, simply add
+`require('!style-loader!css-loader!video.js/dist/video-js.css')` to the file where the player is also included or initialized.
+
+## Handling .eot files in Webpack
+In addition to this, you may run into a problem where Webpack does not know how to load .eot files required for IE8 support by default. This can be solved by installing the file-loader and url-loader packages. Install them by running:
+`npm install --save-dev file-loader url-loader`
+
+With both packages installed, simply add the following to you webpack.config file in the 'loaders' section:
+```
+{
+  loader: 'url-loader?limit=100000',
+  test: /\.(png|woff|woff2|eot|ttf|svg)$/
+}
+```
+
+## Using Webpack with videojs-contrib-hls
+Import the HLS library with a line such as:
+`import * as HLS from 'videojs-contrib-hls';`
+
+In order to use the tech, we must also introduce webworkers with the package 'webworkify-webpack-dropin', run:
+`npm install --save-dev webworkify-webpack-dropin`
+
+To utilize this in your page, simply create an alias in your webpack.config.js file with:
+```
+resolve: {
+  alias: {
+    webworkify: 'webworkify-webpack-dropin'
+  }
+}
+```
+
+Source maps that use the 'eval' tag are not compatible with webworkify, so this may need to be changed also. Source maps such as 'cheap-eval-module-source-map' should be changed to 'cheap-source-map' or anything else that fits your build without using 'eval' source maps.