diff --git a/webpack.config.js b/webpack.config.js
index 51699d1e347..14fccca077e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,6 +4,13 @@ const webpack = require('webpack');
 
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
+const clone = (...args) => Object.assign({}, ...args);
+
+// Allow to customise light dists through env-vars.
+const env = process.env;
+const addSubtitleSupport = (typeof env.SUBTITLE !== 'undefined' && env.SUBTITLE);
+const addAltAudioSupport = (typeof env.ALT_AUDIO !== 'undefined' && env.ALT_AUDIO);
+
 const uglifyJsOptions = {
   screwIE8: true,
   stats: true,
@@ -16,7 +23,7 @@ const uglifyJsOptions = {
   }
 };
 
-const commonConfig = {
+const baseConfig = {
   entry: './src/hls.js',
   module: {
     rules: [
@@ -33,10 +40,22 @@ const commonConfig = {
   }
 };
 
-// Allow to customise light dists through env-vars.
-const env = process.env;
-const addSubtitleSupport = (typeof env.SUBTITLE !== 'undefined' && env.SUBTITLE);
-const addAltAudioSupport = (typeof env.ALT_AUDIO !== 'undefined' && env.ALT_AUDIO);
+const demoConfig = clone(baseConfig, {
+  name: 'demo',
+  entry: './demo/index',
+  output: {
+    filename: 'hls-demo.js',
+    chunkFilename: '[name].js',
+    sourceMapFilename: 'hls-demo.js.map',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/dist/',
+    library: 'HlsDemo',
+    libraryTarget: 'umd',
+    libraryExport: 'default'
+  },
+  plugins: [],
+  devtool: 'source-map'
+});
 
 function getPluginsForConfig(type, minify = false) {
   // common plugins.
@@ -82,7 +101,7 @@ function getAliasesForLightDist() {
   let aliases = {};
 
   if (!addSubtitleSupport) {
-    aliases = Object.assign({}, aliases, {
+    aliases = clone(aliases, {
       './utils/cues': './empty.js',
       './controller/timeline-controller': './empty.js',
       './controller/subtitle-track-controller': './empty.js',
@@ -91,7 +110,7 @@ function getAliasesForLightDist() {
   }
 
   if (!addAltAudioSupport) {
-    aliases = Object.assign({}, aliases, {
+    aliases = clone(aliases, {
       './controller/audio-track-controller': './empty.js',
       './controller/audio-stream-controller': './empty.js'
     });
@@ -163,7 +182,9 @@ const multiConfig = [
     },
     plugins: getPluginsForConfig('light', true)
   }
-].map(fragment => Object.assign({}, commonConfig, fragment));
+].map(config => clone(baseConfig, config));
+
+multiConfig.push(demoConfig);
 
 // webpack matches the --env arguments to a string; for example, --env.debug.min translates to { debug: true, min: true }
 module.exports = (envArgs) => {
@@ -174,12 +195,12 @@ module.exports = (envArgs) => {
 
   // Find the first enabled config within the arguments array
   const enabledConfigName = Object.keys(envArgs).find(envName => envArgs[envName]);
-  let enabledConfig = multiConfig.find(config => config.name === enabledConfigName);
-
+  // Filter out config with name
+  const enabledConfig = multiConfig.find(config => config.name === enabledConfigName);
   if (!enabledConfig) {
     console.error(`Couldn't find a valid config with the name "${enabledConfigName}". Known configs are: ${multiConfig.map(config => config.name).join(', ')}`);
     return;
   }
 
-  return enabledConfig;
+  return [enabledConfig, demoConfig];
 };