Merge "Run minification and tree shaking on build"

package.json

@@ -70,10 +70,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')
+      })
+    ]
+  });
+};