From c2658fc5b2c145719658d63271e88f8f4f916e05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20V=C3=A9zina?= <patrickvezina@gmail.com>
Date: Thu, 24 Mar 2016 11:07:45 -0400
Subject: [PATCH] add image-webpack-loader; keep subfolder(s) for images &
 fonts: 'dist/images/foo/bar.jpg'

---
 package.json      |  5 ++++-
 webpack.config.js | 57 +++++++++++++++++++++++++++++++----------------
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 9cdc0cd..4cfa70d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
   "scripts": {
     "build:production": "webpack -p",
     "build": "webpack -d",
-    "watch": "node watch.js"
+    "watch": "node watch.js",
+    "lint": "eslint -c .eslintrc assets/scripts",
+    "install": "composer install"
   },
   "engines": {
     "node": ">= 0.12.0",
@@ -45,6 +47,7 @@
     "eslint-loader": "^1.3.0",
     "extract-text-webpack-plugin": "^0.9.1",
     "file-loader": "^0.8.5",
+    "image-webpack-loader": "^1.6.3",
     "imagemin-pngcrush": "^4.1.0",
     "imports-loader": "^0.6.5",
     "monkey-hot-loader": "0.0.3",
diff --git a/webpack.config.js b/webpack.config.js
index b182ae8..b1e2a62 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,6 +10,9 @@ var webpack = require('webpack'),
 var config = require('./config'),
     webpackConfig;
 
+const DEBUG = (process.argv.lastIndexOf('-d') !== -1),
+      WATCH = (process.env.SCRIPT === 'watch');
+
 /**
  * Process AssetsPlugin output
  * and format for Sage: {"[name].[ext]":"[hash].[ext]"}
@@ -84,30 +87,47 @@ webpackConfig = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loaders: ['monkey-hot', 'babel']
+        loaders: [
+          'monkey-hot',
+          'babel'
+        ],
       },
       {
         test: /\.css$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
+        loader: (WATCH) ?
+                  'style!css?sourceMap!postcss' :
+                  ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
       },
       {
         test: /\.scss$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap')
+        loader: (WATCH) ?
+                  'style!css?sourceMap!postcss!sass?sourceMap' :
+                  ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap'),
+      },
+
+      {
+        test: /\.(png|jpg|jpeg|gif)(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
+        loaders: [
+          'file?name=[path][name].[ext]&context=assets/',
+          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
+        ],
       },
       {
-        test: /\.(ttf|eot|svg)$/,
-        loader: 'url?limit=10000&name=fonts/[name].[ext]'
+        test: /\.(ttf|eot|svg)(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
+        loader: 'file?name=[path][name].[ext]&context=assets/',
       },
       {
-        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
+        test: /\.woff(2)?(\?v=[0-9]+\.?[0-9]+?\.?[0-9]+?)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          mimetype: "application/font-woff",
+          name: "[path][name].[ext]",
+          context: "assets/",
+        }
       },
-      {
-        test: /\.(png|jpg|jpeg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'file-loader?name=images/[name].[ext]'
-      }
     ],
   },
   resolve: { extensions: [ '', '.js', '.json' ] },
@@ -136,8 +156,7 @@ webpackConfig = {
   }
 };
 
-if (process.argv.lastIndexOf('-d') !== -1 ||
-    process.env.SCRIPT === 'watch') {
+if (DEBUG || WATCH) {
   // development
   webpackConfig.output.filename = 'scripts/[name].js';
   webpackConfig.plugins.push(new webpack.optimize.OccurenceOrderPlugin());
@@ -145,13 +164,12 @@ if (process.argv.lastIndexOf('-d') !== -1 ||
   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: (process.env.SCRIPT === 'watch' || config.options.extractStyles === false)
+    disable: (WATCH || config.options.extractStyles === false)
   }));
 } else {
   // default or production
-  webpackConfig.output.filename = 'scripts/[name].[hash].js';
-  webpackConfig.output.sourceMapFilename = '[file].[hash].map';
-  webpackConfig.plugins.push(new ExtractTextPlugin('styles/[name].[hash].css'));
+  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,
@@ -159,12 +177,13 @@ if (process.argv.lastIndexOf('-d') !== -1 ||
     canPrint: true
   }));
 }
-if (process.env.SCRIPT === '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 = 'source-map';
+  webpackConfig.devtool = '#cheap-module-source-map';
 }
 
 module.exports = webpackConfig;