From c9948626d1cfc3d194fde6a81ee7b2b7a96d64b8 Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Fri, 14 Jul 2017 13:04:08 -0400 Subject: [PATCH] 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 | 6 ++- common/components/Footer/index.jsx | 49 +++++++++---------- common/components/Header/index.jsx | 11 +---- package.json | 1 + webpack_config/config.js | 20 +++++++- webpack_config/webpack.base.js | 23 +++++++-- webpack_config/webpack.dev.js | 6 +-- 7 files changed, 73 insertions(+), 43 deletions(-) diff --git a/common/components/BalanceSidebar/TokenRow.jsx b/common/components/BalanceSidebar/TokenRow.jsx index b75fcfed..749b06e9 100644 --- a/common/components/BalanceSidebar/TokenRow.jsx +++ b/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 ( {!!custom && } - {this.state.showLongBalance ? balance.toString() : formatNumber(balance)} + {showLongBalance ? balance.toString() : formatNumber(balance)} diff --git a/common/components/Footer/index.jsx b/common/components/Footer/index.jsx index 298a02c9..2eb17c8e 100644 --- a/common/components/Footer/index.jsx +++ b/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 {
@@ -46,24 +44,24 @@ export default class Footer extends Component {
-
{translate('FOOTER_2')}
+
+ + {translate('FOOTER_2')} +
- {translate('ADD_Warning_1')} + + {translate('ADD_Warning_1')}

Consider using our affiliate links to...

@@ -106,13 +100,17 @@ export default class Footer extends Component { }
-
On the Web
+
+ On the Web +
-
Support
+
+ Support +
diff --git a/common/components/Header/index.jsx b/common/components/Header/index.jsx index 90e8bcef..cb53a5a9 100644 --- a/common/components/Header/index.jsx +++ b/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 {
- {/* TODO - don't hardcode image path*/} - MyEtherWallet + MyEtherWallet
diff --git a/package.json b/package.json index cfb1cb5b..9bb85b28 100644 --- a/package.json +++ b/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", diff --git a/webpack_config/config.js b/webpack_config/config.js index ba84d559..be0ed02d 100644 --- a/webpack_config/config.js +++ b/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 } + ] + } + } }; diff --git a/webpack_config/webpack.base.js b/webpack_config/webpack.base.js index 2ed58c86..e3a979a1 100644 --- a/webpack_config/webpack.base.js +++ b/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$/, - loader: 'file-loader' + test: /\.(gif|png|jpe?g|svg)$/i, + 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' } ] }, diff --git a/webpack_config/webpack.dev.js b/webpack_config/webpack.dev.js index 3681dcba..49330de6 100644 --- a/webpack_config/webpack.dev.js +++ b/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'] } );