webpack - various ameliorations

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),
-      WATCH = (process.env.SCRIPT === 'watch');
+jsLoader = {
+  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
- * and format for Sage: {"[name].[ext]":"[hash].[ext]"}
+ * Process AssetsPlugin output and format it
+ * 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 (assets[name].hasOwnProperty(ext)) {
-          filename = name + '.' + ext;
-          results[filename] = path.basename(assets[name][ext]);
+      if (path.extname(assets[name]) === '') {
+        for (ext in assets[name]) {
+          if (assets[name].hasOwnProperty(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: {
-    main: [
-      './assets/scripts/main'
-    ],
-    customizer: [
-      './assets/scripts/customizer'
-    ]
-  },
+  context: path.resolve(config.context),
+  entry: config.entry,
   output: {
     path: path.join(__dirname, config.output.path),
     publicPath: config.output.publicPath,
+    filename: scriptsFilename
   },
   module: {
     preLoaders: [
       {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
+        test: /\.js?$/,
+        exclude: /(node_modules|bower_components)/,
         loader: 'eslint'
       }
     ],
     loaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loaders: [
-          'monkey-hot',
-          'babel'
-        ],
-      },
+      jsLoader,
       {
         test: /\.css$/,
-        exclude: /node_modules/,
-        loader: (WATCH) ?
-                  'style!css?sourceMap!postcss' :
-                  ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
+        loader: ExtractTextPlugin.extract('style', [
+          'css?' + sourceMapQueryStr,
+          'postcss'
+        ])
       },
       {
         test: /\.scss$/,
-        exclude: /node_modules/,
-        loader: (WATCH) ?
-                  'style!css?sourceMap!postcss!sass?sourceMap' :
-                  ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap'),
+        loader: ExtractTextPlugin.extract('style', [
+          'css?' + sourceMapQueryStr,
+          'postcss',
+          '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/',
-          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
-        ],
+          'file?' + qs.stringify({
+            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]+?)?$/,
-        loader: 'file?name=[path][name].[ext]&context=assets/',
+        test: /\.(ttf|eot|svg)(\?.*)?$/,
+        loader: 'file?' + qs.stringify({
+          name: '[path][name].[ext]'
+        })
       },
       {
-        test: /\.woff(2)?(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
-        loader: 'url',
-        query: {
+        test: /\.woff(2)?(\?.*)?$/,
+        loader: 'url?' + qs.stringify({
           limit: 10000,
           mimetype: "application/font-woff",
-          name: "[path][name].[ext]",
-          context: "assets/",
-        }
-      },
-    ],
+          name: "[path][name].[ext]"
+        })
+      }
+    ]
+  },
+  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) {
-  // development
-  webpackConfig.output.filename = 'scripts/[name].js';
+// '--watch' to push additional plugins to webpackConfig
+if (argv.watch) {
+  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;