Run minification and tree shaking on build

"npm run build" now builds an artifact optimized for production use.  The
removes dead code, and minizes the result.  The size of the bundle shrinks from
about 14MB to 2MB.

The previous build command is moved to "npm run build:dev".

Change-Id: I21430f06049c4eeeb4a66c7143da8c2919fb5a24
Closes-Bug: 1688610

package.json

@@ -69,10 +69,11 @@
     "webpack-merge": "^4.1.0"
   },
   "scripts": {
-    "build": "webpack --bail",
     "lint": "eslint --max-warnings 0 src && prettier --single-quote --list-different 'src/**/*.js'",
     "prettier": "prettier --write --single-quote 'src/**/*.js'",
-    "start": "webpack-dev-server --progress",
+    "build": "webpack --env=prod --bail --progress",
+    "build:dev": "webpack --env=dev --bail --progress",
+    "start": "webpack-dev-server --env=dev --progress",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "json2pot": "rip json2pot ./i18n/extracted-messages/**/*.json -o ./i18n/messages.pot",

webpack.common.js

@@ -0,0 +1,97 @@
+require('es6-promise').polyfill(); // https://github.com/webpack/css-loader/issues/144
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: __dirname + '/src/js/index.js',
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'tripleo_ui.js',
+    sourceMapFilename: 'tripleo_ui.js.map'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    })
+  ],
+  module: {
+    rules: [
+      // Javascript
+      {
+        test: /\.js$/,
+        include: /src/,
+        exclude: /src\/js\/workers/,
+        loader: 'babel-loader'
+      },
+
+      // Images
+      {
+        test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 8192, // inline base64 URLs for <=8k images, direct URLs for the rest
+          name: '[name].[ext]'
+        }
+      },
+
+      // Fonts and svg images
+      {
+        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 8192,
+          mimetype: 'application/font-woff',
+          name: '[name].[ext]'
+        }
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 8192,
+          mimetype: 'application/octet-stream',
+          name: '[name].[ext]'
+        }
+      },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader',
+        query: { name: '[name].[ext]' }
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 8192,
+          mimetype: 'image/svg+xml',
+          name: '[name].[ext]'
+        }
+      },
+
+      // Plain CSS files
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader'
+        ]
+      },
+
+      // Less
+      {
+        test: /\.less$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'less-loader?sourceMap'
+        ]
+      },
+
+      {
+        loader: __dirname + '/src/js/loaders/version.js',
+        test: /src\/js\/index.js$/
+      }
+
+    ]
+  }
+};

webpack.config.js

@@ -1,108 +1 @@
-require('es6-promise').polyfill(); // https://github.com/webpack/css-loader/issues/144
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  devtool: 'inline-source-map',
-  entry: __dirname + '/src/js/index.js',
-  output: {
-    path: __dirname + '/dist',
-    publicPath: '/',
-    filename: 'tripleo_ui.js',
-    sourceMapFilename: 'tripleo_ui.js.map'
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'src/index.html'
-    })
-  ],
-  module: {
-    rules: [
-      // Javascript
-      {
-        test: /\.js$/,
-        include: /src/,
-        exclude: /src\/js\/workers/,
-        loader: 'babel-loader'
-      },
-
-      // Images
-      {
-        test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 8192, // inline base64 URLs for <=8k images, direct URLs for the rest
-          name: '[name].[ext]'
-        }
-      },
-
-      // Fonts and svg images
-      {
-        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 8192,
-          mimetype: 'application/font-woff',
-          name: '[name].[ext]'
-        }
-      },
-      {
-        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 8192,
-          mimetype: 'application/octet-stream',
-          name: '[name].[ext]'
-        }
-      },
-      {
-        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-        query: { name: '[name].[ext]' }
-      },
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 8192,
-          mimetype: 'image/svg+xml',
-          name: '[name].[ext]'
-        }
-      },
-
-      // Plain CSS files
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
-      },
-
-      // Less
-      {
-        test: /\.less$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'less-loader?sourceMap'
-        ]
-      },
-
-      {
-        loader: __dirname + '/src/js/loaders/version.js',
-        test: /src\/js\/index.js$/
-      }
-
-    ]
-  },
-  devServer: {
-    contentBase: './dist',
-    host: '0.0.0.0',
-    port: 3000,
-    stats: {
-      colors: true
-    },
-    historyApiFallback: true,
-    inline: true
-  }
-};
+module.exports = env => require(`./webpack.${env}.js`)();

webpack.dev.js

@@ -0,0 +1,24 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const CommonConfig = require('./webpack.common.js');
+
+module.exports = env => {
+  return merge(CommonConfig, {
+    devtool: 'source-map',
+    devServer: {
+      contentBase: './dist',
+      host: '0.0.0.0',
+      port: 3000,
+      stats: {
+        colors: true
+      },
+      historyApiFallback: true,
+      inline: true
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify('development')
+      })
+    ]
+  });
+};

webpack.prod.js

@@ -0,0 +1,35 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const CommonConfig = require('./webpack.common.js');
+
+const license = `TripleO UI
+https://github.com/openstack/tripleo-ui
+
+Copyright 2017 Red Hat Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.`;
+
+module.exports = env => {
+  return merge(CommonConfig, {
+    devtool: 'source-map',
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin({
+        sourceMap: true
+      }),
+      new webpack.BannerPlugin(license),
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify('production')
+      })
+    ]
+  });
+};