Develop

package.json

@@ -6,8 +6,8 @@
   "homepage": "",
   "author": "",
   "scripts": {
-    "dev": "webpack-dev-server --output-public-path=/static/",
-    "prod": "cross-env NODE_ENV=production webpack-dev-server --env.prod=true",
+    "dev": "webpack-dev-server --open --output-public-path=/static/",
+    "prod": "cross-env NODE_ENV=production webpack-dev-server --open --env.prod=true",
     "build": "cross-env NODE_ENV=production webpack --env.prod=true",
     "lint": "yarn run lint-js && yarn run lint-css",
     "lint-js": "eslint --ext .js devServer.js webpack.config.dev.js webpack.config.prod.js ./src",
@@ -26,7 +26,6 @@
     "angular-messages": "^1.6.4",
     "angular-translate": "^2.15.1",
     "angular-ui-router": "^0.4.2",
-    "autoprefixer": "^6.7.7",
     "babel-core": "^6.10.4",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
@@ -47,6 +46,7 @@
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "file-loader": "^0.10.1",
+    "friendly-errors-webpack-plugin": "^1.6.1",
     "happypack": "^3.0.2",
     "html-loader": "^0.4.5",
     "img-loader": "^2.0.0",
@@ -55,8 +55,10 @@
     "ng-annotate-loader": "^0.2.0",
     "ng-redux": "^3.4.0-beta.1",
     "node-sass": "^4.5.1",
+    "openpack": "^1.0.0",
     "outdated-browser-pro": "^1.0.0",
     "postcss-loader": "^1.3.3",
+    "progress-bar-webpack-plugin": "^1.9.3",
     "promise-polyfill": "^6.0.2",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
@@ -69,6 +71,7 @@
     "stylelint-webpack-plugin": "^0.7.0",
     "url-loader": "^0.5.7",
     "webpack": "^2.3.2",
+    "webpack-bundle-analyzer": "^2.8.1",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-dev-server": "^2.3.0",
     "webpack-hot-middleware": "^2.13.2"

src/styles/colors.scss

@@ -1,8 +1,7 @@
-$header: #00BFA5;
-$sub-header: #607D8B;
+$header: #00bfa5;
+$sub-header: #607d8b;
 $header-color: #fff;
-
-$sidebar: #37474F;
+$sidebar: #37474f;
 $sidebar-color: #fff;
 $brand-color: #373c47;
 

webpack.config.js

@@ -1,7 +1,11 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const webpack = require('webpack')
 const HappyPack = require('happypack')
 const path = require('path')
-// const autoprefixer = require('autoprefixer')
+const autoprefixer = require('autoprefixer')
 
 const sourcePath = path.join(__dirname, './src')
 const staticsPath = path.join(__dirname, './static')
@@ -10,10 +14,27 @@ module.exports = function () {
   const nodeEnv = process.env.NODE_ENV ? 'production' : 'development'
   const isProd = nodeEnv === 'production'
 
-  const plugins = [
-    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv) } }),
+  let plugins = [
+    new webpack.DefinePlugin({
+      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
+    }),
     new webpack.NoEmitOnErrorsPlugin(),
     new webpack.NamedModulesPlugin(),
+    new webpack.ProvidePlugin({
+      // $: 'jquery',
+      // jQuery: 'jquery',
+      // 'window.jQuery': 'jquery',
+      // 'windows.jQuery': 'jquery'
+    }),
+    new FriendlyErrorsWebpackPlugin(),
+    new ProgressBarPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: [
+          autoprefixer()
+        ]
+      }
+    }),
     new webpack.optimize.CommonsChunkPlugin({
       children: true,
       async: true,
@@ -23,7 +44,15 @@ module.exports = function () {
       verbose: false,
       id: 'scss',
       threads: 2,
-      loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+      loaders: ['style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            minimize: isProd
+          }
+        },
+        'postcss-loader',
+        'sass-loader']
     }),
     new HappyPack({
       verbose: false,
@@ -48,27 +77,45 @@ module.exports = function () {
   ]
   let methods = []
   if (isProd) {
-    plugins.push(
+    plugins = [
+      ...plugins,
+      ...typeof BundleAnalyzerPlugin === 'undefined' ? [] : [new BundleAnalyzerPlugin()],
       new webpack.optimize.UglifyJsPlugin({
         sourceMap: false,
         compress: {
-          warnings: false,
-          screw_ie8: true,
-          conditionals: true,
-          unused: true,
-          comparisons: true,
           sequences: true,
+          properties: true,
           dead_code: true,
+          drop_debugger: true,
+          unsafe: false,
+          conditionals: true,
+          comparisons: true,
           evaluate: true,
+          booleans: true,
+          loops: true,
+          unused: true,
+          hoist_funs: true,
+          hoist_vars: false,
           if_return: true,
-          join_vars: true
+          join_vars: true,
+          cascade: true,
+          side_effects: true,
+          warnings: false,
+          drop_console: false,
+          keep_fnames: true,
+          global_defs: {}
         },
         output: { comments: false }
       })
-    )
-  } else { plugins.push(new webpack.HotModuleReplacementPlugin()) }
+    ]
+  } else {
+    plugins = [
+      ...plugins,
+      new webpack.HotModuleReplacementPlugin(),
+    ]
+  }
   return {
-    devtool: isProd ? 'source-map' : 'eval',
+    devtool: isProd ? '' : 'eval-source-map',
     cache: true,
     context: sourcePath,
     entry: { js: './index.js' },