Merge pull request #893 from pixelated/webpack

Transition from require to webpack

16 files changed, 250 insertions, 221 deletions

diff --git a/.gitignore b/.gitignore
index 0c347bf8..820e352c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .idea
 .bundle
+*app.min.js
 *.log
 *.DS_Store
 *.egg-info
diff --git a/service/pixelated/resources/login_resource.py b/service/pixelated/resources/login_resource.py
index ed0cb54e..2a11b73e 100644
--- a/service/pixelated/resources/login_resource.py
+++ b/service/pixelated/resources/login_resource.py
@@ -40,11 +40,11 @@ def _get_startup_folder():
 
 
 def _get_static_folder():
-    static_folder = os.path.abspath(os.path.join(os.path.abspath(__file__), "..", "..", "..", "web-ui", "app"))
+    static_folder = os.path.abspath(os.path.join(os.path.abspath(__file__), "..", "..", "..", "web-ui", "dist"))
     # this is a workaround for packaging
     if not os.path.exists(static_folder):
         static_folder = os.path.abspath(
-            os.path.join(os.path.abspath(__file__), "..", "..", "..", "..", "web-ui", "app"))
+            os.path.join(os.path.abspath(__file__), "..", "..", "..", "..", "web-ui", "dist"))
     if not os.path.exists(static_folder):
         static_folder = os.path.join('/', 'usr', 'share', 'pixelated-user-agent')
     return static_folder
diff --git a/service/pixelated/resources/root_resource.py b/service/pixelated/resources/root_resource.py
index 8df76c70..101ff6b8 100644
--- a/service/pixelated/resources/root_resource.py
+++ b/service/pixelated/resources/root_resource.py
@@ -111,11 +111,11 @@ class RootResource(BaseResource):
         return os.path.join(path, '..', 'assets')
 
     def _get_static_folder(self):
-        static_folder = os.path.abspath(os.path.join(os.path.abspath(__file__), "..", "..", "..", "web-ui", "app"))
+        static_folder = os.path.abspath(os.path.join(os.path.abspath(__file__), "..", "..", "..", "web-ui", "dist"))
         # this is a workaround for packaging
         if not os.path.exists(static_folder):
             static_folder = os.path.abspath(
-                os.path.join(os.path.abspath(__file__), "..", "..", "..", "..", "web-ui", "app"))
+                os.path.join(os.path.abspath(__file__), "..", "..", "..", "..", "web-ui", "dist"))
         if not os.path.exists(static_folder):
             static_folder = os.path.join('/', 'usr', 'share', 'pixelated-user-agent')
         return static_folder
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 4b6a81a0..b40aecdf 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -92,22 +92,19 @@
   </div>
 </div>
 
-<!--usemin_start-->
 <script src="assets/bower_components/modernizr/modernizr.js"></script>
-<script src="assets/bower_components/lodash/dist/lodash.js"></script>
-<script src="assets/bower_components/jquery/dist/jquery.js"></script>
+<script src="assets/bower_components/lodash/dist/lodash.min.js"></script>
+<script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="assets/bower_components/jquery-ui/jquery-ui.min.js"></script>
 <script src="assets/bower_components/jquery-file-upload/js/jquery.fileupload.js"></script>
-<script src="assets/js/lib/highlightRegex.js"></script>
 <script src="assets/bower_components/handlebars/handlebars.min.js"></script>
 <script src="assets/bower_components/typeahead.js/dist/typeahead.bundle.min.js"></script>
+<script src="assets/bower_components/iframe-resizer/js/iframeResizer.min.js"></script>
 <script src="assets/bower_components/foundation/js/foundation.js" ></script>
 <script src="assets/bower_components/foundation/js/foundation/foundation.reveal.js" ></script>
 <script src="assets/bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>
 <script src="assets/js/foundation/initialize_foundation.js"></script>
-<script src="assets/bower_components/iframe-resizer/js/iframeResizer.min.js"></script>
-<script src="assets/bower_components/requirejs/require.js" data-main="assets/js/main.js"></script>
-<!--usemin_end-->
+<script src="assets/app.js"></script>
 
 </body>
 </html>
diff --git a/web-ui/app/js/index.js b/web-ui/app/js/index.js
new file mode 100644
index 00000000..2f06e2b8
--- /dev/null
+++ b/web-ui/app/js/index.js
@@ -0,0 +1,20 @@
+import 'js/lib/highlightRegex';
+import 'js/monkey_patching/all';
+
+import compose from 'flight/lib/compose';
+import registry from 'flight/lib/registry';
+import advice from 'flight/lib/advice';
+import withLogging from 'flight/lib/logger';
+import debug from 'flight/lib/debug';
+import events from 'page/events';
+import initializeDefault from 'page/default';
+
+window.Pixelated = window.Pixelated || {};
+window.Pixelated.events = events;
+
+compose.mixin(registry, [advice.withAdvice, withLogging]);
+
+debug.enable(true);
+debug.events.logAll();
+
+initializeDefault('');
diff --git a/web-ui/app/js/main.js b/web-ui/app/js/main.js
deleted file mode 100644
index b8836a6b..00000000
--- a/web-ui/app/js/main.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * Copyright (c) 2014 ThoughtWorks, Inc.
- *
- * Pixelated is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Pixelated is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
- */
-
-requirejs.config({
-  baseUrl: '../assets/',
-  paths: {
-    'mail_list': 'js/mail_list',
-    'page': 'js/page',
-    'feedback': 'js/feedback',
-    'flight': 'bower_components/flight',
-    'DOMPurify': 'bower_components/DOMPurify/dist/purify.min',
-    'he': 'bower_components/he/he',
-    'hbs': 'js/generated/hbs',
-    'helpers': 'js/helpers',
-    'lib': 'js/lib',
-    'views': 'js/views',
-    'tags': 'js/tags',
-    'mail_list_actions': 'js/mail_list_actions',
-    'user_alerts': 'js/user_alerts',
-    'mail_view': 'js/mail_view',
-    'dispatchers': 'js/dispatchers',
-    'services': 'js/services',
-    'mixins': 'js/mixins',
-    'search': 'js/search',
-    'foundation': 'js/foundation',
-    'features': 'js/features/features',
-    'i18next': 'bower_components/i18next/i18next',
-    'i18nextXHRBackend': 'bower_components/i18next-xhr-backend/i18nextXHRBackend',
-    'i18nextBrowserLanguageDetector': 'bower_components/i18next-browser-languagedetector/i18nextBrowserLanguageDetector',
-    'quoted-printable': 'bower_components/quoted-printable',
-    'utf8': 'bower_components/utf8',
-    'user_settings': 'js/user_settings'
-  }
-});
-
-require([
-  'flight/lib/compose',
-  'flight/lib/debug'
-], function(compose, debug){
-  'use strict';
-  debug.enable(true);
-  debug.events.logAll();
-});
-
-require(
-  [
-    'flight/lib/compose',
-    'flight/lib/registry',
-    'flight/lib/advice',
-    'flight/lib/logger',
-    'flight/lib/debug',
-    'page/events',
-    'page/default',
-    'js/monkey_patching/all'
-  ],
-
-  function(compose, registry, advice, withLogging, debug, events, initializeDefault, _monkeyPatched) {
-    'use strict';
-
-    window.Pixelated = window.Pixelated || {};
-    window.Pixelated.events = events;
-
-    compose.mixin(registry, [advice.withAdvice, withLogging]);
-
-    debug.enable(true);
-    debug.events.logAll();
-
-    initializeDefault('');
-  }
-);
diff --git a/web-ui/app/sandbox.html b/web-ui/app/sandbox.html
index 8325b0da..3e110977 100644
--- a/web-ui/app/sandbox.html
+++ b/web-ui/app/sandbox.html
@@ -5,10 +5,8 @@
   <meta charset="utf-8">
   <link href="css/sandbox.css" rel="stylesheet" type="text/css">
 
-  <!--usemin_start-->
-  <script src="js/sandbox.js"></script>
+  <script src="sandbox.js"></script>
   <script src="bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
-  <!--usemin_end-->
 </head>
 
 <body></body>
diff --git a/web-ui/bower.json b/web-ui/bower.json
index 4b7bdfb9..b933da51 100644
--- a/web-ui/bower.json
+++ b/web-ui/bower.json
@@ -6,11 +6,11 @@
     "flight": "1.3.0",
     "requirejs": "~2.1.15",
     "lodash": "2.4.1",
-    "foundation": "~5.4.7",
     "i18next": "~3.3.1",
     "i18next-xhr-backend": "~0.6.0",
     "i18next-browser-languagedetector": "~0.3.0",
     "font-awesome": "4.2.0",
+    "foundation": "~5.4.7",
     "quoted-printable": "0.2.1",
     "typeahead.js": "~0.10.5",
     "jasmine-flight": "~3.0.0",
diff --git a/web-ui/config/alias-webpack.js b/web-ui/config/alias-webpack.js
new file mode 100644
index 00000000..f4ea1b63
--- /dev/null
+++ b/web-ui/config/alias-webpack.js
@@ -0,0 +1,28 @@
+var path = require('path');
+
+module.exports = {
+  'DOMPurify': 'dompurify',
+  'i18nextXHRBackend': 'i18next-xhr-backend',
+  'i18nextBrowserLanguageDetector': 'i18next-browser-languagedetector',
+  'flight': path.join(__dirname, '../app/bower_components/flight'),
+  'found': path.join(__dirname, '../app/bower_components/foundation'),
+  'js': path.join(__dirname, '../app/js'),
+  'mail_list': path.join(__dirname, '../app/js/mail_list'),
+  'page': path.join(__dirname, '../app/js/page'),
+  'feedback': path.join(__dirname, '../app/js/feedback'),
+  'hbs': path.join(__dirname, '../app/js/generated/hbs'),
+  'helpers': path.join(__dirname, '../app/js/helpers'),
+  'lib': path.join(__dirname, '../app/js/lib'),
+  'views': path.join(__dirname, '../app/js/views'),
+  'tags': path.join(__dirname, '../app/js/tags'),
+  'mail_list_actions': path.join(__dirname, '../app/js/mail_list_actions'),
+  'user_alerts': path.join(__dirname, '../app/js/user_alerts'),
+  'mail_view': path.join(__dirname, '../app/js/mail_view'),
+  'dispatchers': path.join(__dirname, '../app/js/dispatchers'),
+  'services': path.join(__dirname, '../app/js/services'),
+  'mixins': path.join(__dirname, '../app/js/mixins'),
+  'search': path.join(__dirname, '../app/js/search'),
+  'foundation': path.join(__dirname, '../app/js/foundation'),
+  'features': path.join(__dirname, '../app/js/features/features'),
+  'user_settings': path.join(__dirname, '../app/js/user_settings')
+}
diff --git a/web-ui/config/buildoptions.js b/web-ui/config/buildoptions.js
deleted file mode 100644
index 63c91653..00000000
--- a/web-ui/config/buildoptions.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright (c) 2014 ThoughtWorks, Inc.
-   *
- * Pixelated is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Pixelated is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
- */
-
-({
-  baseUrl: '../app',
-  wrap: true,
-  almond: true,
-  optimize: 'none',
-  mainConfigFile: '../app/js/main.js',
-  out: '../.tmp/app.concatenated.js',
-  include: ['js/main'],
-  name: 'bower_components/almond/almond'
-})
diff --git a/web-ui/config/copy-webpack.js b/web-ui/config/copy-webpack.js
new file mode 100644
index 00000000..79a5de83
--- /dev/null
+++ b/web-ui/config/copy-webpack.js
@@ -0,0 +1,86 @@
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = new CopyWebpackPlugin([
+  { context: 'app/', from: '404.html' },
+  { context: 'app/', from: 'index.html' },
+  { context: 'app/', from: 'sandbox.html' },
+  { context: 'app/', from: 'css/*' },
+  { context: 'app/', from: 'fonts/*' },
+  { context: 'app/', from: 'locales/**/*' },
+  { context: 'app/', from: 'bower_components/font-awesome/fonts/*' },
+  {
+    context: 'app/',
+    from: 'bower_components/font-awesome/css/font-awesome.min.css',
+    to: 'bower_components/font-awesome/css'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/jquery-file-upload/css/jquery.fileupload.css',
+    to: 'bower_components/jquery-file-upload/css'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/modernizr/modernizr.js',
+    to: 'bower_components/modernizr'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/lodash/dist/lodash.min.js',
+    to: 'bower_components/lodash/dist'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/jquery/dist/jquery.min.js',
+    to: 'bower_components/jquery/dist'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/jquery-ui/jquery-ui.min.js',
+    to: 'bower_components/jquery-ui'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/jquery-file-upload/js/jquery.fileupload.js',
+    to: 'bower_components/jquery-file-upload/js'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/handlebars/handlebars.min.js',
+    to: 'bower_components/handlebars'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/typeahead.js/dist/typeahead.bundle.min.js',
+    to: 'bower_components/typeahead.js/dist'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/iframe-resizer/js/iframeResizer.min.js',
+    to: 'bower_components/iframe-resizer/js'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js',
+    to: 'bower_components/iframe-resizer/js'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/foundation/js/foundation.js',
+    to: 'bower_components/foundation/js'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/foundation/js/foundation/foundation.reveal.js',
+    to: 'bower_components/foundation/js/foundation'
+  },
+  {
+    context: 'app/',
+    from: 'bower_components/foundation/js/foundation/foundation.offcanvas.js',
+    to: 'bower_components/foundation/js/foundation'
+  },
+  {
+    context: 'app/',
+    from: 'js/foundation/initialize_foundation.js',
+    to: 'js/foundation'
+  }
+])
diff --git a/web-ui/config/package.sh b/web-ui/config/package.sh
deleted file mode 100644
index 165eeff3..00000000
--- a/web-ui/config/package.sh
+++ /dev/null
@@ -1,78 +0,0 @@
-#!/bin/bash
-# Copyright (c) 2014 ThoughtWorks, Inc.
-#
-# Pixelated is free software: you can redistribute it and/or modify
-# it under the terms of the GNU Affero General Public License as published by
-# the Free Software Foundation, either version 3 of the License, or
-# (at your option) any later version.
-#
-# Pixelated is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU Affero General Public License for more details.
-#
-# You should have received a copy of the GNU Affero General Public License
-# along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
-
-# prepare files for .deb package
-
-set -e
-
-export PIXELATED_BUILD='package'
-
-mkdir -p dist
-
-# initial npm tasks
-./go clean
-./go compass
-./go handlebars
-./go imagemin
-./go minify_html
-./go minify_sandbox
-./go add_git_version
-./go buildmain
-
-
-# copy files
-cd app
-cp --parents \
-404.html \
-fonts/* \
-locales/**/* \
-bower_components/font-awesome/css/font-awesome.min.css \
-bower_components/jquery-file-upload/css/jquery.fileupload.css \
-bower_components/font-awesome/fonts/* \
-../dist
-cd -
-
-# concat js files and minify for app.min.js
-cat \
-app/bower_components/modernizr/modernizr.js \
-app/bower_components/lodash/dist/lodash.js \
-app/bower_components/jquery/dist/jquery.js \
-app/bower_components/jquery-ui/jquery-ui.js \
-app/bower_components/jquery-file-upload/js/jquery.fileupload.js \
-app/js/lib/highlightRegex.js \
-app/bower_components/handlebars/handlebars.js \
-app/bower_components/typeahead.js/dist/typeahead.bundle.js \
-app/bower_components/foundation/js/foundation.js \
-app/bower_components/foundation/js/foundation/foundation.reveal.js \
-app/bower_components/foundation/js/foundation/foundation.offcanvas.js \
-app/js/foundation/initialize_foundation.js \
-app/bower_components/iframe-resizer/js/iframeResizer.js \
-.tmp/app.concatenated.js > dist/app.js
-node_modules/.bin/minify dist/app.js > dist/app.min.js
-rm dist/app.js
-
-if [ ! -s dist/app.min.js ]
-then
-echo "Minification failed!"
-exit 1;
-fi
-
-# concat js files and minify for sandbox.min.js
-cat \
-app/js/sandbox.js \
-app/bower_components/iframe-resizer/js/iframeResizer.contentWindow.js > dist/sandbox.js
-node_modules/.bin/minify dist/sandbox.js > dist/sandbox.min.js
-rm dist/sandbox.js
diff --git a/web-ui/karma.conf.js b/web-ui/karma.conf.js
index 52b54f57..2895dc42 100644
--- a/web-ui/karma.conf.js
+++ b/web-ui/karma.conf.js
@@ -61,7 +61,6 @@ module.exports = function (config) {
 
     // list of files to exclude
     exclude: [
-      'app/js/main.js'
     ],
 
     // test results reporter to use
diff --git a/web-ui/package.json b/web-ui/package.json
index 2a0056e4..3d1720e1 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -5,41 +5,63 @@
   "repository": "https://github.com/pixelated-project/pixelated-user-agent",
   "private": true,
   "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
     "bower": "1.7.9",
-    "handlebars": "4.0.5",
+    "copy-webpack-plugin": "^4.0.1",
+    "dompurify": "^0.8.4",
+    "font-awesome": "^4.7.0",
+    "handlebars": "^4.0.5",
+    "he": "^1.1.0",
     "html-minifier": "2.1.6",
+    "i18next": "^4.1.4",
+    "i18next-browser-languagedetector": "^1.0.1",
+    "i18next-xhr-backend": "^1.2.1",
+    "iframe-resizer": "^3.5.7",
     "imagemin": "5.2.1",
+    "jasmine-flight": "^4.0.0",
+    "jasmine-jquery": "^2.1.1",
+    "jquery": "^3.1.1",
+    "jquery-file-upload": "^4.0.5",
+    "jquery-ui": "^1.12.1",
     "jshint": "2.9.2",
     "karma": "0.13.19",
     "karma-chrome-launcher": "0.2.2",
+    "karma-coverage": "0.2.7",
     "karma-firefox-launcher": "0.1.7",
     "karma-jasmine": "0.2.2",
     "karma-jasmine-ajax": "0.1.13",
     "karma-junit-reporter": "0.2.2",
     "karma-phantomjs-launcher": "1.0.1",
     "karma-requirejs": "1.0.0",
-    "karma-coverage": "0.2.7",
-    "minify": "2.0.9",
+    "minify": "^2.0.13",
+    "modernizr": "^3.3.1",
+    "quoted-printable": "^1.0.1",
     "requirejs": "2.2.0",
-    "watch": "0.19.1"
+    "typeahead.js": "^0.11.1",
+    "utf8": "^2.1.2",
+    "watch": "0.19.1",
+    "webpack": "^1.14.0"
   },
   "scripts": {
-    "test": "npm run jshint --silent && npm run build --silent && node_modules/karma/bin/karma start --single-run $GRUNT_OPTS",
-    "debug": "npm run build && node_modules/karma/bin/karma start --browsers Chrome $GRUNT_OPTS",
+    "test": "npm run jshint --silent && npm run build --silent && karma start --single-run $GRUNT_OPTS",
+    "debug": "npm run build && karma start --browsers Chrome $GRUNT_OPTS",
     "watch": "npm run compass-watch & npm run handlebars-watch",
-    "watch-test": "node_modules/karma/bin/karma start",
-    "handlebars": "mkdir -p app/js/generated/hbs/ && node_modules/handlebars/bin/handlebars app/templates/**/*.hbs > app/js/generated/hbs/templates.js --namespace=window.Pixelated --root .",
-    "handlebars-watch": "node_modules/.bin/watch 'npm run handlebars' app/templates",
+    "watch-test": "karma start",
+    "handlebars": "mkdir -p app/js/generated/hbs/ && handlebars app/templates/**/*.hbs > app/js/generated/hbs/templates.js --namespace=window.Pixelated --root .",
+    "handlebars-watch": "watch 'npm run handlebars' app/templates",
     "compass": "compass compile",
     "compass-watch": "compass watch",
-    "build": "npm run clean && npm run handlebars && npm run add_git_version && npm run compass",
-    "jshint": "node_modules/jshint/bin/jshint --config=.jshintrc app test",
-    "clean": "rm -rf .tmp/ 'dist/*' app/js/generated/hbs/* app/css/*",
-    "buildmain": "node_modules/requirejs/bin/r.js -o config/buildoptions.js",
-    "package": "/bin/bash config/package.sh",
+    "build": "npm run build-statics && npm run build-js",
+    "build-statics": "npm run clean && npm run handlebars && npm run add_git_version && npm run compass",
+    "build-prod": "npm run build-statics && webpack -p --config ./webpack.production.config.js",
+    "build-js": "webpack --colors --progress",
+    "jshint": "jshint --config=.jshintrc app test",
+    "clean": "rm -rf dist/ app/js/generated/hbs/* app/css/*",
+    "package": "PIXELATED_BUILD='package' npm run build-prod && npm run imagemin",
     "imagemin": "node config/imagemin.js",
-    "minify_html": "node_modules/.bin/html-minifier app/index.html --collapse-whitespace | sed 's|<!--usemin_start-->.*<!--usemin_end-->|<script src=\"assets/app.min.js\" type=\"text/javascript\"></script>|' > dist/index.html",
-    "minify_sandbox": "node_modules/.bin/html-minifier app/sandbox.html --collapse-whitespace | sed 's|<!--usemin_start-->.*<!--usemin_end-->|<script src=\"sandbox.min.js\" type=\"text/javascript\"></script>|' > dist/sandbox.html",
     "add_git_version": "/bin/bash config/add_git_version.sh"
   }
 }
diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js
new file mode 100644
index 00000000..99162908
--- /dev/null
+++ b/web-ui/webpack.config.js
@@ -0,0 +1,32 @@
+var path = require('path');
+var webpack = require('webpack');
+var copyWebpack = require('./config/copy-webpack');
+var aliases = require('./config/alias-webpack');
+
+module.exports = {
+  entry: {
+    app: './app/js/index.js',
+    sandbox: './app/js/sandbox.js'
+  },
+  node: { fs: 'empty' },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+    publicPath: '/assets/'
+  },
+  resolve: {
+    alias: aliases,
+    extensions: ['', '.js']
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel',
+        query: { presets: ['es2015']}
+      }
+    ]
+  },
+  plugins: [copyWebpack]
+}
diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js
new file mode 100644
index 00000000..bddbbe9c
--- /dev/null
+++ b/web-ui/webpack.production.config.js
@@ -0,0 +1,35 @@
+var path = require('path');
+var webpack = require('webpack');
+var copyWebpack = require('./config/copy-webpack');
+var aliases = require('./config/alias-webpack');
+
+module.exports = {
+  entry: {
+    app: './app/js/index.js',
+    sandbox: './app/js/sandbox.js'
+  },
+  node: { fs: 'empty' },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+    publicPath: '/assets/'
+  },
+  resolve: {
+    alias: aliases,
+    extensions: ['', '.js']
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        query: { presets: ['es2015']}
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    copyWebpack
+  ]
+}