fix: update image config and add jpg to smoke test (#67)

Author: Adam Butterworth

config/webpack.dev-stage.config.js

@@ -102,15 +102,15 @@ module.exports = Merge.smart(commonConfig, {
           {
             loader: 'image-webpack-loader',
             options: {
-              optimizationlevel: 7,
               mozjpeg: {
                 progressive: true,
+                quality: 65,
               },
               gifsicle: {
                 interlaced: false,
               },
               pngquant: {
-                quality: '65-90',
+                quality: [0.65, 0.90],
                 speed: 4,
               },
             },

config/webpack.dev.config.js

@@ -102,15 +102,15 @@ module.exports = Merge.smart(commonConfig, {
           {
             loader: 'image-webpack-loader',
             options: {
-              optimizationlevel: 7,
               mozjpeg: {
                 progressive: true,
+                quality: 65,
               },
               gifsicle: {
                 interlaced: false,
               },
               pngquant: {
-                quality: '65-90',
+                quality: [0.65, 0.90],
                 speed: 4,
               },
             },

config/webpack.prod.config.js

@@ -111,15 +111,15 @@ module.exports = Merge.smart(commonConfig, {
           {
             loader: 'image-webpack-loader',
             options: {
-              optimizationlevel: 7,
               mozjpeg: {
                 progressive: true,
+                quality: 65,
               },
               gifsicle: {
                 interlaced: false,
               },
               pngquant: {
-                quality: '65-90',
+                quality: [0.65, 0.90],
                 speed: 4,
               },
             },

example/src/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import appleUrl, { ReactComponent as Apple } from './apple.svg';
 import './style.scss';
+import appleImg from './apple.jpg';
 
 export default function App() {
   const newEnglandApples = ['macintosh', 'granny smith'];
@@ -14,6 +15,9 @@ export default function App() {
       <Apple style={{ width: '10rem' }} />
       <img src={appleUrl} alt="apple" style={{ width: '10rem' }} />
       <img src={appleUrl} alt="apple" style={{ width: '10rem' }} />
+      <br />
+      <img src={appleImg} alt="apple" style={{ width: '10rem' }} />
+      <p>Photo by Louis Hansel @shotsoflouis on Unsplash</p>
     </div>
   );
 }

example/src/__snapshots__/App.test.jsx.snap

@@ -44,5 +44,18 @@ exports[`Basic test should render 1`] = `
       }
     }
   />
+  <br />
+  <img
+    alt="apple"
+    src="test-file-stub"
+    style={
+      Object {
+        "width": "10rem",
+      }
+    }
+  />
+  <p>
+    Photo by Louis Hansel @shotsoflouis on Unsplash
+  </p>
 </div>
 `;