Bundle and compress images with Webpack (#49)

* First pass at image loader

* Clean up config, convert some images as example.

common/components/BalanceSidebar/TokenRow.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Big from 'big.js';
 import translate from 'translations';
 import { formatNumber } from 'utils/formatters';
+import removeIcon from 'assets/images/icon-remove.svg';
 
 export default class TokenRow extends React.Component {
   props: {
@@ -17,6 +18,7 @@ export default class TokenRow extends React.Component {
   };
   render() {
     const { balance, symbol, custom } = this.props;
+    const { showLongBalance } = this.state;
     return (
       <tr>
         <td
@@ -26,13 +28,13 @@ export default class TokenRow extends React.Component {
         >
           {!!custom &&
             <img
-              src="images/icon-remove.svg"
+              src={removeIcon}
               className="token-remove"
               title="Remove Token"
               onClick={this.onRemove}
             />}
           <span>
-            {this.state.showLongBalance ? balance.toString() : formatNumber(balance)}
+            {showLongBalance ? balance.toString() : formatNumber(balance)}
           </span>
         </td>
         <td>

common/components/Footer/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import translate, { getTranslators } from 'translations';
 import { donationAddressMap } from 'config/data';
+import logo from 'assets/images/logo-myetherwallet.svg';
 
 export default class Footer extends Component {
   render() {
@@ -13,14 +14,11 @@ export default class Footer extends Component {
               <div className="col-sm-3 footer-1">
                 <p aria-hidden="true">
                   <a href="/">
-                    {/* TODO - don't hardcode image path*/}
                     <img
-                      src={
+                      src={logo}
-                        'https://www.myetherwallet.com/images/logo-myetherwallet.svg'
-                      }
                       height="55px"
                       width="auto"
-                      alt="Ether Wallet"
+                      alt="MyEtherWallet"
                     />
                   </a>
                 </p>
@@ -46,24 +44,24 @@ export default class Footer extends Component {
                 <br />
               </div>
               <div className="col-sm-6 footer-2">
-                <h5><i aria-hidden="true">💝</i>{translate('FOOTER_2')}</h5>
+                <h5>
+                  <i aria-hidden="true">💝</i>
+                  {translate('FOOTER_2')}
+                </h5>
                 <ul>
                   <li>
                     {' '}ETH:{' '}
-                    <span className="mono wrap">
+                    <span className="mono wrap">{donationAddressMap.ETH}</span>
-                      {donationAddressMap.ETH}
-                    </span>
                   </li>
                   <li>
                     {' '}BTC:{' '}
-                    <span className="mono wrap">
+                    <span className="mono wrap">{donationAddressMap.BTC}</span>
-                      {donationAddressMap.BTC}
-                    </span>
                   </li>
                 </ul>
 
                 <h5>
-                  <i aria-hidden="true">👫</i>{translate('ADD_Warning_1')}
+                  <i aria-hidden="true">👫</i>
+                  {translate('ADD_Warning_1')}
                 </h5>
                 <p>Consider using our affiliate links to...</p>
                 <ul>
@@ -73,8 +71,7 @@ export default class Footer extends Component {
                       href="https://bity.com/af/jshkb37v"
                       target="_blank"
                     >
-                      Swap ETH/BTC/EUR/CHF via
+                      Swap ETH/BTC/EUR/CHF via Bity.com
-                      Bity.com
                     </a>
                   </li>
                   <li>
@@ -82,9 +79,7 @@ export default class Footer extends Component {
                       href="https://www.ledgerwallet.com/r/fa4b?path=/products/"
                       target="_blank"
                     >
-                      Buy
+                      Buy a Ledger Nano S
-                      a
-                      Ledger Nano S
                     </a>
                   </li>
                   <li>
@@ -92,8 +87,7 @@ export default class Footer extends Component {
                       href="https://trezor.io/?a=myetherwallet.com"
                       target="_blank"
                     >
-                      Buy a
+                      Buy a TREZOR
-                      TREZOR
                     </a>
                   </li>
                 </ul>
@@ -106,13 +100,17 @@ export default class Footer extends Component {
                   <ul>
                     <li>
                       {translators.map(key =>
-                        <span key={key}>{translate(key)}</span>
+                        <span key={key}>
+                          {translate(key)}
+                        </span>
                       )}
                     </li>
                   </ul>}
               </div>
               <div className="col-sm-3 footer-3">
-                <h5><i aria-hidden="true">🌎</i> On the Web</h5>
+                <h5>
+                  <i aria-hidden="true">🌎</i> On the Web
+                </h5>
                 <ul>
                   <li>
                     <a
@@ -170,7 +168,9 @@ export default class Footer extends Component {
                   </li>
                 </ul>
 
-                <h5><i aria-hidden="true">🙏</i> Support</h5>
+                <h5>
+                  <i aria-hidden="true">🙏</i> Support
+                </h5>
                 <ul>
                   <li>
                     <a
@@ -187,8 +187,7 @@ export default class Footer extends Component {
                       href="https://github.com/kvhnuke/etherwallet/issues"
                       target="_blank"
                     >
-                      Github
+                      Github Issue
-                      Issue
                     </a>
                   </li>
                 </ul>

common/components/Header/index.jsx

@@ -4,6 +4,7 @@ import TabsOptions from './components/TabsOptions';
 import { Link } from 'react-router';
 import { Dropdown } from 'components/ui';
 import { languages, NODES } from '../../config/data';
+import logo from 'assets/images/logo-myetherwallet.svg';
 
 export default class Header extends Component {
   props: {
@@ -25,15 +26,7 @@ export default class Header extends Component {
         <section className="bg-gradient header-branding">
           <section className="container">
             <Link to={'/'} className="brand" aria-label="Go to homepage">
-              {/* TODO - don't hardcode image path*/}
+              <img src={logo} height="64px" width="245px" alt="MyEtherWallet" />
-              <img
-                src={
-                  'https://www.myetherwallet.com/images/logo-myetherwallet.svg'
-                }
-                height="64px"
-                width="245px"
-                alt="MyEtherWallet"
-              />
             </Link>
             <div className="tagline">
               <span style={{ maxWidth: '395px' }}>

package.json

@@ -54,6 +54,7 @@
     "friendly-errors-webpack-plugin": "^1.4.0",
     "glob": "^7.1.1",
     "html-webpack-plugin": "^2.28.0",
+    "image-webpack-loader": "^3.3.1",
     "isomorphic-style-loader": "^1.1.0",
     "jest": "^19.0.2",
     "less": "^2.7.2",

webpack_config/config.js

@@ -20,5 +20,23 @@ module.exports = {
   babel: {
     babelrc: true
   },
-  cssModules: false
+  // Settings for webpack-image-loader image compression
+  imageCompressionOptions: {
+    optipng: {
+      optimizationLevel: 4
+    },
+    gifsicle: {
+      interlaced: false
+    },
+    mozjpeg: {
+      quality: 80
+    },
+    svgo: {
+      plugins: [
+        { removeViewBox: true },
+        { removeEmptyAttrs: false },
+        { sortAttrs: true }
+      ]
+    }
+  }
 };

webpack_config/webpack.base.js

@@ -51,12 +51,29 @@ module.exports = {
         exclude: [/node_modules\/(?!ethereum-blockies)/]
       },
       {
-        test: /\.(ico|jpg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
+        test: /\.(ico|webp|eot|otf|ttf|woff|woff2)(\?.*)?$/,
         loader: 'file-loader?limit=100000'
       },
       {
-        test: /\.svg$/,
+        test: /\.(gif|png|jpe?g|svg)$/i,
-        loader: 'file-loader'
+        loaders: [
+          {
+            loader: 'file-loader',
+            query: {
+              hash: 'sha512',
+              digest: 'hex',
+              name: '[path][name].[ext]?[hash:6]'
+            }
+          },
+          {
+            loader: 'image-webpack-loader',
+            query: config.imageCompressionOptions
+          }
+        ]
+      },
+      {
+        test: /\.(ico|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
+        loader: 'file-loader?limit=100000'
       }
     ]
   },

webpack_config/webpack.dev.js

@@ -9,15 +9,15 @@ base.devtool = 'source-map';
 base.module.loaders.push(
   {
     test: /\.css$/,
-    loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
+    loaders: ['style-loader', 'css-loader']
   },
   {
     test: /\.scss$/,
-    loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
+    loaders: ['style-loader', 'css-loader', 'sass-loader']
   },
   {
     test: /\.less$/,
-    loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'less-loader']
+    loaders: ['style-loader', 'css-loader', 'less-loader']
   }
 );