Merge pull request #1629 from ptrckvzn/webpack-sage-9

webpack config - improvements

assets/config.json

@@ -0,0 +1,18 @@
+{
+  "context": "assets",
+  "entry": {
+    "main": [
+      "./scripts/main.js",
+      "./styles/main.scss"
+    ],
+    "customizer": [
+      "./scripts/customizer.js"
+    ]
+  },
+  "output": {
+    "path": "dist",
+    "publicPath": "/app/themes/sage/dist/"
+  },
+  "devUrl": "http://example.dev",
+  "devPort": 3000
+}

assets/scripts/main.js

@@ -1,5 +1,3 @@
-import "../styles/main.scss";
-
 import $ from 'jquery';
 import Router from './util/router';
 

assets/styles/common/_variables.scss

@@ -1,4 +1,5 @@
 // Grid settings
+$enable-flex:           true;
 $main-sm-columns:       12;
 $sidebar-sm-columns:    4;
 

package.json

@@ -18,50 +18,53 @@
     }
   ],
   "scripts": {
-    "build:production": "webpack -p",
-    "build": "webpack -d",
-    "watch": "node watch.js",
-    "lint": "eslint -c .eslintrc assets/scripts",
+    "build:production": "webpack -p --progress --release",
+    "build": "webpack -d --progress",
+    "watch": "node watch.js --watch",
+    "lint": "eslint -c .eslintrc assets/scripts watch.js webpack.config.js",
     "install": "composer install"
   },
   "engines": {
     "node": ">= 0.12.0",
     "npm": ">=2.1.5"
   },
   "devDependencies": {
-    "assets-webpack-plugin": "^3.3.0",
+    "assets-webpack-plugin": "^3.4.0",
     "autoprefixer": "^6.1.0",
-    "babel-cli": "^6.1.18",
-    "babel-core": "^6.1.20",
-    "babel-eslint": "^5.0.0",
-    "babel-loader": "^6.1.0",
+    "babel-cli": "^6.6.5",
+    "babel-core": "^6.7.4",
+    "babel-eslint": "^6.0.0",
+    "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.1.18",
     "babel-register": "^6.5.2",
     "body-parser": "^1.14.1",
-    "browser-sync": "^2.11.1",
-    "clean-webpack-plugin": "^0.1.3",
-    "css-loader": "^0.22.0",
+    "browser-sync": "^2.11.2",
+    "clean-webpack-plugin": "^0.1.8",
+    "css-loader": "^0.23.1",
     "cssnano": "^3.5.2",
-    "eslint": "^1.9.0",
-    "eslint-config-airbnb": "^1.0.0",
+    "eslint": "^2.5.1",
+    "eslint-config-airbnb": "^6.2.0",
     "eslint-loader": "^1.3.0",
-    "extract-text-webpack-plugin": "^0.9.1",
+    "eslint-plugin-react": "^4.2.3",
+    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "image-webpack-loader": "^1.6.3",
     "imagemin-pngcrush": "^4.1.0",
     "imports-loader": "^0.6.5",
+    "minimist": "^1.2.0",
     "monkey-hot-loader": "0.0.3",
     "node-sass": "^3.4.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "postcss": "^5.0.18",
     "postcss-loader": "^0.8.0",
+    "qs": "^6.1.0",
     "resolve-url-loader": "^1.4.3",
     "sass-loader": "^3.1.1",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.4",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.5.0"
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.6",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "dependencies": {
     "babel-runtime": "^6.5.0",

watch.js

@@ -1,25 +1,31 @@
-/* eslint no-console: 0 */
-
-process.env.SCRIPT = 'watch';
-
+// External dependencies
 var webpack = require('webpack'),
     webpackDevMiddleware = require('webpack-dev-middleware'),
     webpackHotMiddleware = require('webpack-hot-middleware'),
     browserSync = require('browser-sync');
 
-var devBuildConfig = require('./webpack.config'),
-    config = require('./config'),
-    compiler = webpack(devBuildConfig);
+// Internal dependencies
+var webpackConfig = require('./webpack.config'),
+    config = require('./assets/config');
+
+// Internal variables
+var host = 'http://localhost',
+    port = config.devPort || '3000',
+    compiler;
+
+webpackConfig.output.publicPath = host + ':' + port + config.output.publicPath;
+compiler = webpack(webpackConfig);
 
 browserSync.init({
+  port: port,
   proxy: {
     target: config.devUrl,
     middleware: [
       webpackDevMiddleware(compiler, {
-        publicPath: devBuildConfig.output.publicPath,
+        publicPath: webpackConfig.output.publicPath,
         stats: {
           colors: true
-        },
+        }
       }),
       webpackHotMiddleware(compiler, {
         log: browserSync.notify