update web pack config

package.json

@@ -58,14 +58,15 @@
     "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
+    "file-loader": "^1.1.11",
     "html-webpack-plugin": "^2.29.0",
     "html-webpack-template": "^6.0.2",
+    "image-webpack-loader": "^4.2.0",
     "imports-loader": "^0.7.1",
     "material-ui": "^0.19.4",
     "normalize-jss": "^4.0.0",
     "raw-loader": "^0.5.1",
     "react-tap-event-plugin": "^3.0.2",
-    "url-loader": "^0.5.9",
     "webpack": "^3.3.0",
     "webpack-dev-server": "^2.5.1",
     "worker-loader": "^0.8.1",

webpack.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
@@ -59,10 +59,21 @@ module.exports = {
             inline: false,
             name: '[name].js'
           }
-        }, babelLoader],
+        }, babelLoader]
       }, {
         test: /\.(png|jpg|gif)$/,
-        use: ['url-loader?name=images/[name].[ext]']
+        use: [{
+          loader: 'file-loader',
+          options: { name: '[path][name].[ext]' }
+        },
+        ...(!devMode ? [{
+          loader: 'image-webpack-loader',
+          options: {
+            mozjpeg: { progressive: true, quality: 65 },
+            optipng: { enabled: false },
+            pngquant: { quality: '65-90', speed: 4 }
+          }
+        }] : [])]
       }, {
         test: /\.glsl$/,
         use: ['raw-loader']