diff --git a/webpack.config.js b/webpack.config.js
index 9f49529..5f75702 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,12 @@
 const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
 const pkg = require('./package.json')
+const { NODE_ENV } = process.env
 
-const webpackEnv = process.env.WEBPACK
-const isDemo = webpackEnv === 'demo'
-const isProd = process.env.NODE_ENV === 'production'
-const isDev = !webpackEnv && !isProd
+const isDev = !NODE_ENV
+const isProd = NODE_ENV === 'production'
+const isDemo = NODE_ENV === 'demo'
 
 const libName = 'react-ripples'
 
@@ -12,10 +14,10 @@ module.exports = {
   entry: {
     [libName]: isProd
       ? ['./src']
-      : ['babel-polyfill', './demo'],
+      : ['./dev'],
   },
   output: {
-    path: isProd ? `${__dirname}/dist` : `${__dirname}/demo`,
+    path: isProd ? `${__dirname}/npm/dist` : `${__dirname}/gh-pages`,
     filename: '[name].js',
     library: 'ReactRipples',
     libraryTarget: 'umd',
@@ -25,7 +27,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,
-        loader: 'babel',
+        loader: 'babel-loader',
       }
     ]
   },
@@ -33,21 +35,26 @@ module.exports = {
     alias: isDemo ? {
       'react': 'react/dist/react.min.js',
       'react-dom': 'react-dom/dist/react-dom.min.js',
-    } : {}
+    } : { }
   },
-  externals: isProd ? {
-    ...Object.keys(pkg.dependencies).reduce((o, dep)=> {
-      o[dep] = true
-      return o
-    }, {}),
-    
+  plugins: [
+    ...isProd ? [] : [
+      new HtmlWebpackPlugin({
+        template: './dev/index.html',
+        minify: {
+          collapseWhitespace: true,
+        }
+      })
+    ]
+  ],
+  externals: isProd ? Object.assign({
     react: {
       root: 'React',
-      commonjs: 'React',
-      commonjs2: 'React',
+      commonjs: 'react',
+      commonjs2: 'react',
       amd: 'react',
     }
-  } : {},
+  }) : { },
   watch: isDev,
   devtool: isDev ? 'eval' : '',
 }