diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 02571ffb3..000000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const IS_DEV = (process.env.NODE_ENV || 'development') === 'development';
-function hotInject(path) {
-  return IS_DEV ? ['react-hot-loader/patch', path.replace(/\.js$/, '.dev.js')] : [path];
-}
-
-module.exports = {
-  entry: {
-    main: hotInject(path.resolve('./demo/src/main.js')),
-  },
-  output: {
-    path: path.resolve('./demo/dist'),
-    filename: '[name].js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        loader: 'babel-loader?filenameRelative=' + path.resolve('./'),
-        exclude: /(node_modules)|(demo)/,
-      },
-      {
-        test: /\.js$/,
-        loader: `babel-loader?extends=${path.resolve('./demo/.babelrc')}&sourceRoot=${path.resolve(
-          './'
-        )}`,
-        include: path.resolve('./demo'),
-      },
-      {
-        test: /\.s?css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-      },
-    ],
-  },
-  plugins: [new HtmlWebpackPlugin({ template: path.resolve('demo/src/index.html') })],
-  devtool: IS_DEV ? '#eval-source-map' : 'source-map',
-  devServer: {
-    hot: true,
-    publicPath: '/',
-  },
-  context: __dirname,
-};
diff --git a/webpack/webpack.config.common.js b/webpack/webpack.config.common.js
new file mode 100755
index 000000000..cf7260a0a
--- /dev/null
+++ b/webpack/webpack.config.common.js
@@ -0,0 +1,56 @@
+'use strict'
+
+const path = require('path')
+const contentBase = path.resolve('./dist')
+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+const settings = {
+  HtmlWebpackPlugin: {
+    template: './demo/src/index.html',
+    inject: true
+  }
+}
+
+module.exports = {
+  main: {
+    plugins: [
+      new CleanWebpackPlugin(),
+      new HtmlWebpackPlugin(settings.HtmlWebpackPlugin),
+      new ExtractTextPlugin('[name]')
+    ],
+
+    entry: {
+      'js/main.js': path.resolve('./demo/src/index.js'),
+      // 'js/main.js': path.resolve('./src/index.js'),
+      //'css/main.css': path.resolve('./src/styles/index.scss')
+    },
+
+    output: {
+      filename: '[name]',
+      path: contentBase
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: 'babel-loader'
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader']
+        },
+        {
+          test: /(\.sass|\.scss)$/,
+          use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+        }
+      ]
+    }
+  },
+
+  contentBase: contentBase
+}
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
new file mode 100755
index 000000000..8795b1cec
--- /dev/null
+++ b/webpack/webpack.config.dev.js
@@ -0,0 +1,17 @@
+'use strict'
+
+const common = require('./webpack.config.common')
+
+console.log('[Webpack] Use dev configuration\n')
+
+module.exports = Object.assign(
+  {
+    mode: 'development',
+    devtool: '#source-map',
+    devServer: {
+      open: true, // to open the local server in browser
+      contentBase: common.contentBase //serve from 'dist' folder
+    }
+  },
+  common.main
+)
diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js
new file mode 100755
index 000000000..49f245adc
--- /dev/null
+++ b/webpack/webpack.config.prod.js
@@ -0,0 +1,14 @@
+'use strict'
+
+const common = require('./webpack.config.common')
+
+console.log('[Webpack] Use prod configuration\n')
+
+module.exports = Object.assign(
+  {
+    //mode: 'production',
+    mode: 'development',
+    devtool: '#source-map',
+  },
+  common.main
+)