webpack - various ameliorations

.babelrc

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "es2015"
-  ]
-}

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';
 

config.json

@@ -1,10 +0,0 @@
-{
-  "output": {
-    "path": "dist",
-    "publicPath": "/app/themes/sage/dist/"
-  },
-  "options": {
-    "extractStyles": true
-  },
-  "devUrl" : "http://example.dev"
-}

package.json

@@ -18,10 +18,10 @@
     }
   ],
   "scripts": {
-    "build:production": "webpack -p",
+    "build:production": "webpack -p --progress --release",
-    "build": "webpack -d",
+    "build": "webpack -d --progress",
-    "watch": "node watch.js",
+    "watch": "node watch.js --watch",
-    "lint": "eslint -c .eslintrc assets/scripts",
+    "lint": "eslint -c .eslintrc assets/scripts watch.js webpack.config.js",
     "install": "composer install"
   },
   "engines": {
@@ -29,39 +29,42 @@
     "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-cli": "^6.6.5",
-    "babel-core": "^6.1.20",
+    "babel-core": "^6.7.4",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.0.0",
-    "babel-loader": "^6.1.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",
+    "browser-sync": "^2.11.2",
-    "clean-webpack-plugin": "^0.1.3",
+    "clean-webpack-plugin": "^0.1.8",
-    "css-loader": "^0.22.0",
+    "css-loader": "^0.23.1",
     "cssnano": "^3.5.2",
-    "eslint": "^1.9.0",
+    "eslint": "^2.5.1",
-    "eslint-config-airbnb": "^1.0.0",
+    "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": "^1.12.14",
-    "webpack-dev-middleware": "^1.2.0",
+    "webpack-dev-middleware": "^1.6",
-    "webpack-hot-middleware": "^2.5.0"
+    "webpack-hot-middleware": "^2.10.0"
   },
   "dependencies": {
     "babel-runtime": "^6.5.0",

watch.js

@@ -1,25 +1,31 @@
-/* eslint no-console: 0 */
+// External dependencies
-
-process.env.SCRIPT = 'watch';
-
 var webpack = require('webpack'),
     webpackDevMiddleware = require('webpack-dev-middleware'),
     webpackHotMiddleware = require('webpack-hot-middleware'),
     browserSync = require('browser-sync');
 
-var devBuildConfig = require('./webpack.config'),
+// Internal dependencies
-    config = require('./config'),
+var webpackConfig = require('./webpack.config'),
-    compiler = webpack(devBuildConfig);
+    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

webpack.config.js

@@ -1,5 +1,8 @@
+// External dependencies
 var webpack = require('webpack'),
     path = require('path'),
+    argv = require('minimist')(process.argv.slice(2)),
+    qs = require('qs'),
     autoprefixer = require('autoprefixer'),
     Clean = require("clean-webpack-plugin"),
     AssetsPlugin = require('assets-webpack-plugin'),
@@ -7,15 +10,29 @@ var webpack = require('webpack'),
     OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
     cssnano = require('cssnano');
 
-var config = require('./config'),
+// Internal dependencies
+var config = require('./assets/config');
+
+// Internal variables
+var scriptsFilename = (argv.release) ? 'scripts/[name]_[hash].js' : 'scripts/[name].js',
+    stylesFilename = (argv.release) ? 'styles/[name]_[hash].css' : 'styles/[name].css',
+    sourceMapQueryStr = (argv.release) ? '-sourceMap' : '+sourceMap',
+    jsLoader,
     webpackConfig;
 
-const DEBUG = (process.argv.lastIndexOf('-d') !== -1),
+jsLoader = {
-      WATCH = (process.env.SCRIPT === 'watch');
+  test: /\.js$/,
+  exclude: /(node_modules|bower_components)/,
+  loaders: [ 'babel?presets[]=es2015&cacheDirectory' ]
+};
+
+if (argv.watch) { // '--watch' to add monkey-hot
+  jsLoader.loaders.unshift('monkey-hot');
+}
 
 /**
- * Process AssetsPlugin output
+ * Process AssetsPlugin output and format it
- * and format for Sage: {"[name].[ext]":"[hash].[ext]"}
+ * for Sage: {"[name].[ext]":"[name]_[hash].[ext]"}
  * @param  {Object} assets passed by processOutput
  * @return {String}        JSON
  */
@@ -27,10 +44,12 @@ var assetsPluginProcessOutput = function (assets) {
 
   for (name in assets) {
     if (assets.hasOwnProperty(name)) {
-      for (ext in assets[name]) {
+      if (path.extname(assets[name]) === '') {
-        if (assets[name].hasOwnProperty(ext)) {
+        for (ext in assets[name]) {
-          filename = name + '.' + ext;
+          if (assets[name].hasOwnProperty(ext)) {
-          results[filename] = path.basename(assets[name][ext]);
+            filename = name + '.' + ext;
+            results[filename] = path.basename(assets[name][ext]);
+          }
         }
       }
     }
@@ -47,7 +66,10 @@ var assetsPluginProcessOutput = function (assets) {
 var addHotMiddleware = function (entry) {
   var name,
       results = {},
-      hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
+      hotMiddlewareScript = 'webpack-hot-middleware/client?' + qs.stringify({
+        timeout: 20000,
+        reload: true
+      });
 
   for (name in entry) {
     if (entry.hasOwnProperty(name)) {
@@ -55,7 +77,7 @@ var addHotMiddleware = function (entry) {
         results[name] = [entry[name]];
       } else {
         results[name] = entry[name].slice(0);
-      };
+      }
       results[name].push(hotMiddlewareScript);
     }
   }
@@ -63,114 +85,142 @@ var addHotMiddleware = function (entry) {
 }
 
 webpackConfig = {
-  entry: {
+  context: path.resolve(config.context),
-    main: [
+  entry: config.entry,
-      './assets/scripts/main'
-    ],
-    customizer: [
-      './assets/scripts/customizer'
-    ]
-  },
   output: {
     path: path.join(__dirname, config.output.path),
     publicPath: config.output.publicPath,
+    filename: scriptsFilename
   },
   module: {
     preLoaders: [
       {
-        test: /\.jsx?$/,
+        test: /\.js?$/,
-        exclude: /node_modules/,
+        exclude: /(node_modules|bower_components)/,
         loader: 'eslint'
       }
     ],
     loaders: [
-      {
+      jsLoader,
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loaders: [
-          'monkey-hot',
-          'babel'
-        ],
-      },
       {
         test: /\.css$/,
-        exclude: /node_modules/,
+        loader: ExtractTextPlugin.extract('style', [
-        loader: (WATCH) ?
+          'css?' + sourceMapQueryStr,
-                  'style!css?sourceMap!postcss' :
+          'postcss'
-                  ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
+        ])
       },
       {
         test: /\.scss$/,
-        exclude: /node_modules/,
+        loader: ExtractTextPlugin.extract('style', [
-        loader: (WATCH) ?
+          'css?' + sourceMapQueryStr,
-                  'style!css?sourceMap!postcss!sass?sourceMap' :
+          'postcss',
-                  ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap'),
+          'resolve-url?' + sourceMapQueryStr,
+          'sass?' + sourceMapQueryStr
+        ])
       },
-
       {
-        test: /\.(png|jpg|jpeg|gif)(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
+        test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
         loaders: [
-          'file?name=[path][name].[ext]&context=assets/',
+          'file?' + qs.stringify({
-          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
+            name: '[path][name].[ext]'
-        ],
+          }),
+          'image-webpack?' + JSON.stringify({
+            bypassOnDebug:true,
+            progressive: true,
+            optimizationLevel: 7,
+            interlaced: true,
+            pngquant: {
+              quality: "65-90",
+              speed: 4
+            },
+            svgo: {
+              removeUnknownsAndDefaults: false,
+              cleanupIDs: false
+            }
+          })
+        ]
       },
       {
-        test: /\.(ttf|eot|svg)(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
+        test: /\.(ttf|eot|svg)(\?.*)?$/,
-        loader: 'file?name=[path][name].[ext]&context=assets/',
+        loader: 'file?' + qs.stringify({
+          name: '[path][name].[ext]'
+        })
       },
       {
-        test: /\.woff(2)?(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
+        test: /\.woff(2)?(\?.*)?$/,
-        loader: 'url',
+        loader: 'url?' + qs.stringify({
-        query: {
           limit: 10000,
           mimetype: "application/font-woff",
-          name: "[path][name].[ext]",
+          name: "[path][name].[ext]"
-          context: "assets/",
+        })
-        }
+      }
-      },
+    ]
-    ],
+  },
+  resolve: {
+    extensions: [ '', '.js', '.json' ],
+    modulesDirectories: [
+      'node_modules',
+      'bower_components'
+    ]
   },
-  resolve: { extensions: [ '', '.js', '.json' ] },
   externals: {
     jquery: 'jQuery'
   },
   plugins: [
     new Clean([config.output.path]),
+    new ExtractTextPlugin(stylesFilename, {
+      allChunks: true,
+      disable: (argv.watch === true) // '--watch' disable ExtractTextPlugin
+    }),
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
       'window.Tether': 'tether'
-    }),
-    new AssetsPlugin({
-      path: config.output.path,
-      filename: 'assets.json',
-      fullPath: false,
-      processOutput: assetsPluginProcessOutput,
     })
   ],
-  postcss: [ autoprefixer ],
+  postcss: [
+    autoprefixer({
+      browsers: [
+        'last 2 versions',
+        'android 4',
+        'opera 12'
+      ]
+    })
+  ],
   eslint: {
     failOnWarning: false,
-    failOnError: true,
+    failOnError: true
+  },
+  stats: {
+    colors: true
   }
 };
 
-if (DEBUG || WATCH) {
+// '--watch' to push additional plugins to webpackConfig
-  // development
+if (argv.watch) {
-  webpackConfig.output.filename = 'scripts/[name].js';
+  webpackConfig.entry = addHotMiddleware(webpackConfig.entry);
+  webpackConfig.output.pathinfo = true;
+  webpackConfig.debug = true;
+  webpackConfig.devtool = '#cheap-module-source-map';
   webpackConfig.plugins.push(new webpack.optimize.OccurenceOrderPlugin());
   webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
   webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
-  webpackConfig.plugins.push(new ExtractTextPlugin('styles/[name].css', {
+}
-    // disable if webpack is called from the node.js api or set to false in config file
+
-    disable: (WATCH || config.options.extractStyles === false)
+// '--release' to push additional plugins to webpackConfig
+if (argv.release) {
+  webpackConfig.plugins.push(new AssetsPlugin({
+    path: path.join(__dirname, config.output.path),
+    filename: 'assets.json',
+    fullPath: false,
+    processOutput: assetsPluginProcessOutput
+  }));
+  webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      'drop_debugger': true
+    }
   }));
-} else {
-  // default or production
-  webpackConfig.output.filename = 'scripts/[name]-[hash].js';
-  webpackConfig.plugins.push(new ExtractTextPlugin('styles/[name]-[hash].css'));
-  webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin());
   webpackConfig.plugins.push(new OptimizeCssAssetsPlugin({
     cssProcessor: cssnano,
     cssProcessorOptions: { discardComments: { removeAll: true } },
@@ -178,12 +228,4 @@ if (DEBUG || WATCH) {
   }));
 }
 
-if (WATCH) {
-  // development settings when called from the node.js api by the watch script
-  webpackConfig.entry = addHotMiddleware(webpackConfig.entry);
-  webpackConfig.output.pathinfo = true;
-  webpackConfig.debug = true;
-  webpackConfig.devtool = '#cheap-module-source-map';
-}
-
 module.exports = webpackConfig;