Merge branch 'master' into reduce-css-file-size

config/webpack.dev-stage.config.js

@@ -1,5 +1,6 @@
 // This is the dev Webpack config. All settings here should prefer a fast build
 // time at the expense of creating larger, unoptimized bundles.
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 const { merge } = require('webpack-merge');
 const Dotenv = require('dotenv-webpack');
@@ -124,26 +125,26 @@ module.exports = merge(commonConfig, {
       },
       {
         test: /\.(jpe?g|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              mozjpeg: {
-                progressive: true,
-                quality: 65,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: [0.65, 0.90],
-                speed: 4,
-              },
+        loader: 'file-loader',
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      '...',
+      new ImageMinimizerPlugin({
+        implementation: ImageMinimizerPlugin.sharpMinify,
+        options: {
+          encodeOptions: {
+            ...['png', 'jpeg', 'jpg'].reduce((accumulator, value) => (
+              { ...accumulator, [value]: { progressive: true, quality: 65 } }
+            ), {}),
+            gif: {
+              effort: 5,
             },
           },
-        ],
-      },
+        },
+      }),
     ],
   },
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.

config/webpack.dev.config.js

@@ -1,5 +1,6 @@
 // This is the dev Webpack config. All settings here should prefer a fast build
 // time at the expense of creating larger, unoptimized bundles.
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 const { merge } = require('webpack-merge');
 const Dotenv = require('dotenv-webpack');
@@ -125,26 +126,28 @@ module.exports = merge(commonConfig, {
       },
       {
         test: /\.(jpe?g|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              mozjpeg: {
-                progressive: true,
-                quality: 65,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: [0.65, 0.90],
-                speed: 4,
+        loader: 'file-loader',
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      '...',
+      new ImageMinimizerPlugin({
+        minimizer: {
+          implementation: ImageMinimizerPlugin.sharpMinify,
+          options: {
+            encodeOptions: {
+              ...['png', 'jpeg', 'jpg'].reduce((accumulator, value) => (
+                { ...accumulator, [value]: { progressive: true, quality: 65 } }
+              ), {}),
+              gif: {
+                effort: 5,
               },
             },
           },
-        ],
-      },
+        },
+      }),
     ],
   },
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.

config/webpack.prod.config.js

@@ -1,6 +1,8 @@
 // This is the prod Webpack config. All settings here should prefer smaller,
 // optimized bundles at the expense of a longer build time.
 
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { merge } = require('webpack-merge');
@@ -153,25 +155,7 @@ module.exports = merge(commonConfig, {
       },
       {
         test: /\.(jpe?g|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              mozjpeg: {
-                progressive: true,
-                quality: 65,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: [0.65, 0.90],
-                speed: 4,
-              },
-            },
-          },
-        ],
+        loader: 'file-loader',
       },
     ],
   },
@@ -182,6 +166,24 @@ module.exports = merge(commonConfig, {
     splitChunks: {
       chunks: 'all',
     },
+    minimizer: [
+      '...',
+      new ImageMinimizerPlugin({
+        minimizer: {
+          implementation: ImageMinimizerPlugin.sharpMinify,
+          options: {
+            encodeOptions: {
+              ...['png', 'jpeg', 'jpg'].reduce((accumulator, value) => (
+                { ...accumulator, [value]: { progressive: true, quality: 65 } }
+              ), {}),
+              gif: {
+                effort: 5,
+              },
+            },
+          },
+        },
+      }),
+    ],
   },
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
   plugins: [

example/package.json

@@ -18,6 +18,6 @@
     "react-dom": "^16.14.0"
   },
   "devDependencies": {
-    "react-test-renderer": "16.13.1"
+    "react-test-renderer": "16.14.0"
   }
 }