dashboard: upgrade JS libraries, optimize webpack and eslint

This commit is contained in:
Kurkó Mihály 2018-08-14 12:46:38 +03:00
parent b784aa949c
commit 66756cd2d6
18 changed files with 1890 additions and 2082 deletions

View file

@ -0,0 +1,3 @@
node_modules/* #ignored by default
flow-typed/*
bundle.js

View file

@ -16,71 +16,74 @@
// React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react // React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react
{ {
'env': { "env": {
'browser': true, "browser": true,
'node': true, "node": true,
'es6': true, "es6": true
}, },
'parser': 'babel-eslint', "parser": "babel-eslint",
'parserOptions': { "parserOptions": {
'sourceType': 'module', "sourceType": "module",
'ecmaVersion': 6, "ecmaVersion": 6,
'ecmaFeatures': { "ecmaFeatures": {
'jsx': true, "jsx": true
} }
}, },
'extends': 'airbnb', "extends": [
'plugins': [ "eslint:recommended",
'flowtype', "airbnb",
'react', "plugin:flowtype/recommended",
"plugin:react/recommended",
"prettier",
"prettier/flowtype",
"prettier/react"
], ],
'rules': { "plugins": [
'no-tabs': 'off', "flowtype",
'indent': ['error', 'tab'], "react",
'react/jsx-indent': ['error', 'tab'], "prettier"
'react/jsx-indent-props': ['error', 'tab'], ],
'react/prefer-stateless-function': 'off', "rules": {
'jsx-quotes': ['error', 'prefer-single'], "no-tabs": "off",
'no-plusplus': 'off', "indent": ["error", "tab"],
'no-console': ['error', { allow: ['error'] }], "react/jsx-indent": ["error", "tab"],
"react/jsx-indent-props": ["error", "tab"],
"react/prefer-stateless-function": "off",
//"react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}], // buggy
"jsx-quotes": ["error", "prefer-single"],
"no-plusplus": "off",
"no-console": ["error", { "allow": ["error"] }],
// Specifies the maximum length of a line. // Specifies the maximum length of a line.
'max-len': ['warn', 120, 2, { "max-len": ["warn", 120, 2, {
'ignoreUrls': true, "ignoreUrls": true,
'ignoreComments': false, "ignoreComments": false,
'ignoreRegExpLiterals': true, "ignoreRegExpLiterals": true,
'ignoreStrings': true, "ignoreStrings": true,
'ignoreTemplateLiterals': true, "ignoreTemplateLiterals": true
}], }],
// Enforces consistent spacing between keys and values in object literal properties. // Enforces consistent spacing between keys and values in object literal properties.
'key-spacing': ['error', {'align': { "key-spacing": ["error", {"align": {
'beforeColon': false, "beforeColon": false,
'afterColon': true, "afterColon": true,
'on': 'value' "on": "value"
}}], }}],
// Prohibits padding inside curly braces. // Prohibits padding inside curly braces.
'object-curly-spacing': ['error', 'never'], "object-curly-spacing": ["error", "never"],
'no-use-before-define': 'off', // messageAPI "no-use-before-define": "off", // message types
'default-case': 'off', "default-case": "off",
"prettier/prettier": ["error", {
'flowtype/boolean-style': ['error', 'boolean'], "singleQuote": true,
'flowtype/define-flow-type': 'warn', "useTabs": true,
'flowtype/generic-spacing': ['error', 'never'], }]
'flowtype/no-primitive-constructor-types': 'error',
'flowtype/no-weak-types': 'error',
'flowtype/object-type-delimiter': ['error', 'comma'],
'flowtype/require-valid-file-annotation': 'error',
'flowtype/semi': ['error', 'always'],
'flowtype/space-after-type-colon': ['error', 'always'],
'flowtype/space-before-generic-bracket': ['error', 'never'],
'flowtype/space-before-type-colon': ['error', 'never'],
'flowtype/union-intersection-spacing': ['error', 'always'],
'flowtype/use-flow-type': 'warn',
'flowtype/valid-syntax': 'warn',
}, },
'settings': { "settings": {
'flowtype': { "import/resolver": {
'onlyFilesWithFlowAnnotation': true, "node": {
"paths": ["components"] // import './components/Component' -> import 'Component'
} }
}, },
"flowtype": {
"onlyFilesWithFlowAnnotation": true
}
}
} }

View file

@ -7,3 +7,4 @@ node_modules/jss/flow-typed
[options] [options]
include_warnings=true include_warnings=true
module.name_mapper='\(.*\)$' -> '<PROJECT_ROOT>/\1'

View file

@ -19,7 +19,7 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import type {ChildrenArray} from 'react'; import type {ChildrenArray} from 'react';
import Grid from 'material-ui/Grid'; import Grid from '@material-ui/core/Grid';
// styles contains the constant styles of the component. // styles contains the constant styles of the component.
const styles = { const styles = {
@ -33,7 +33,7 @@ const styles = {
flex: 1, flex: 1,
padding: 0, padding: 0,
}, },
} };
export type Props = { export type Props = {
children: ChildrenArray<React$Element<any>>, children: ChildrenArray<React$Element<any>>,

View file

@ -18,7 +18,7 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import Typography from 'material-ui/Typography'; import Typography from '@material-ui/core/Typography';
import {styles} from '../common'; import {styles} from '../common';
// multiplier multiplies a number by another. // multiplier multiplies a number by another.
@ -70,7 +70,8 @@ export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier
} }
return ( return (
<Typography type='caption' color='inherit'> <Typography type='caption' color='inherit'>
<span style={styles.light}>{text}</span> {simplifyBytes(p)}/s <span style={styles.light}>{text}</span>
{simplifyBytes(p)}/s
</Typography> </Typography>
); );
}; };

View file

@ -18,14 +18,14 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import Header from './Header'; import Header from 'Header';
import Body from './Body'; import Body from 'Body';
import {inserter as logInserter, SAME} from 'Logs';
import {inserter as peerInserter} from 'Network';
import {MENU} from '../common'; import {MENU} from '../common';
import type {Content} from '../types/content'; import type {Content} from '../types/content';
import {inserter as logInserter, SAME} from './Logs';
import {inserter as peerInserter} from './Network';
// deepUpdate updates an object corresponding to the given update data, which has // deepUpdate updates an object corresponding to the given update data, which has
// the shape of the same structure as the original object. updater also has the same // the shape of the same structure as the original object. updater also has the same
@ -38,7 +38,6 @@ import {inserter as peerInserter} from './Network';
// of the update. // of the update.
const deepUpdate = (updater: Object, update: Object, prev: Object): $Shape<Content> => { const deepUpdate = (updater: Object, update: Object, prev: Object): $Shape<Content> => {
if (typeof update === 'undefined') { if (typeof update === 'undefined') {
// TODO (kurkomisi): originally this was deep copy, investigate it.
return prev; return prev;
} }
if (typeof updater === 'function') { if (typeof updater === 'function') {

View file

@ -18,13 +18,16 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import Typography from 'material-ui/Typography'; import Typography from '@material-ui/core/Typography';
import Grid from 'material-ui/Grid'; import Grid from '@material-ui/core/Grid';
import {ResponsiveContainer, AreaChart, Area, Tooltip} from 'recharts'; import ResponsiveContainer from 'recharts/es6/component/ResponsiveContainer';
import AreaChart from 'recharts/es6/chart/AreaChart';
import Area from 'recharts/es6/cartesian/Area';
import Tooltip from 'recharts/es6/component/Tooltip';
import ChartRow from './ChartRow'; import ChartRow from 'ChartRow';
import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from './CustomTooltip'; import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from 'CustomTooltip';
import {styles as commonStyles} from '../common'; import {styles as commonStyles} from '../common';
import type {General, System} from '../types/content'; import type {General, System} from '../types/content';
@ -53,6 +56,10 @@ const styles = {
height: '100%', height: '100%',
width: '99%', width: '99%',
}, },
link: {
color: 'inherit',
textDecoration: 'none',
},
}; };
// themeStyles returns the styles generated from the theme for the component. // themeStyles returns the styles generated from the theme for the component.
@ -73,9 +80,11 @@ export type Props = {
shouldUpdate: Object, shouldUpdate: Object,
}; };
type State = {};
// Footer renders the footer of the dashboard. // Footer renders the footer of the dashboard.
class Footer extends Component<Props> { class Footer extends Component<Props, State> {
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
return typeof nextProps.shouldUpdate.general !== 'undefined' || typeof nextProps.shouldUpdate.system !== 'undefined'; return typeof nextProps.shouldUpdate.general !== 'undefined' || typeof nextProps.shouldUpdate.system !== 'undefined';
} }
@ -165,7 +174,12 @@ class Footer extends Component<Props> {
{general.commit && ( {general.commit && (
<Typography type='caption' color='inherit'> <Typography type='caption' color='inherit'>
<span style={commonStyles.light}>{'Commit '}</span> <span style={commonStyles.light}>{'Commit '}</span>
<a href={`https://github.com/ethereum/go-ethereum/commit/${general.commit}`} target='_blank' style={{color: 'inherit', textDecoration: 'none'}} > <a
href={`https://github.com/ethereum/go-ethereum/commit/${general.commit}`}
target='_blank'
rel='noopener noreferrer'
style={styles.link}
>
{general.commit.substring(0, 8)} {general.commit.substring(0, 8)}
</a> </a>
</Typography> </Typography>

View file

@ -18,13 +18,13 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import AppBar from 'material-ui/AppBar'; import AppBar from '@material-ui/core/AppBar';
import Toolbar from 'material-ui/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
import IconButton from 'material-ui/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Icon from 'material-ui/Icon'; import Icon from '@material-ui/core/Icon';
import MenuIcon from 'material-ui-icons/Menu'; import MenuIcon from '@material-ui/icons/Menu';
import Typography from 'material-ui/Typography'; import Typography from '@material-ui/core/Typography';
// styles contains the constant styles of the component. // styles contains the constant styles of the component.
const styles = { const styles = {

View file

@ -18,7 +18,8 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import List, {ListItem} from 'material-ui/List'; import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import escapeHtml from 'escape-html'; import escapeHtml from 'escape-html';
import type {Record, Content, LogsMessage, Logs as LogsType} from '../types/content'; import type {Record, Content, LogsMessage, Logs as LogsType} from '../types/content';
@ -251,15 +252,15 @@ class Logs extends Component<Props, State> {
// atBottom checks if the scroll position it at the bottom of the container. // atBottom checks if the scroll position it at the bottom of the container.
atBottom = () => { atBottom = () => {
const {container} = this.props; const {container} = this.props;
return container.scrollHeight - container.scrollTop <= return container.scrollHeight - container.scrollTop
container.clientHeight + container.scrollHeight * requestBand; <= container.clientHeight + container.scrollHeight * requestBand;
}; };
// beforeUpdate is called by the parent component, saves the previous scroll position // beforeUpdate is called by the parent component, saves the previous scroll position
// and the height of the first log chunk, which can be deleted during the insertion. // and the height of the first log chunk, which can be deleted during the insertion.
beforeUpdate = () => { beforeUpdate = () => {
let firstHeight = 0; let firstHeight = 0;
let chunkList = this.content.children[1]; const chunkList = this.content.children[1];
if (chunkList && chunkList.children[0]) { if (chunkList && chunkList.children[0]) {
firstHeight = chunkList.children[0].clientHeight; firstHeight = chunkList.children[0].clientHeight;
} }

View file

@ -18,12 +18,12 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import Network from 'Network';
import Logs from 'Logs';
import Footer from 'Footer';
import {MENU} from '../common'; import {MENU} from '../common';
import Network from './Network';
import Logs from './Logs';
import Footer from './Footer';
import type {Content} from '../types/content'; import type {Content} from '../types/content';
// styles contains the constant styles of the component. // styles contains the constant styles of the component.
@ -55,21 +55,16 @@ export type Props = {
send: string => void, send: string => void,
}; };
type State = {};
// Main renders the chosen content. // Main renders the chosen content.
class Main extends Component<Props> { class Main extends Component<Props, State> {
constructor(props) { constructor(props) {
super(props); super(props);
this.container = React.createRef(); this.container = React.createRef();
this.content = React.createRef(); this.content = React.createRef();
} }
getSnapshotBeforeUpdate() {
if (this.content && typeof this.content.beforeUpdate === 'function') {
return this.content.beforeUpdate();
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
if (this.content && typeof this.content.didUpdate === 'function') { if (this.content && typeof this.content.didUpdate === 'function') {
this.content.didUpdate(prevProps, prevState, snapshot); this.content.didUpdate(prevProps, prevState, snapshot);
@ -82,6 +77,13 @@ class Main extends Component<Props> {
} }
}; };
getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<S>) {
if (this.content && typeof this.content.beforeUpdate === 'function') {
return this.content.beforeUpdate();
}
return null;
}
render() { render() {
const { const {
classes, active, content, shouldUpdate, classes, active, content, shouldUpdate,

View file

@ -18,11 +18,14 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import Table, {TableHead, TableBody, TableRow, TableCell} from 'material-ui/Table'; import Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import type {Network as NetworkType, PeerBundle, Peer} from '../types/content'; import type {Network as NetworkType, PeerBundle, Peer} from '../types/content';
// inserter is a state updater function for the main component, which inserts the new log chunk into the chunk array. // inserter is a state updater function for the main component, which handles the peers.
// limit is the maximum length of the chunk array, used in order to prevent the browser from OOM.
export const inserter = (update: {[string]: PeerBundle}, prev: {[string]: PeerBundle}) => { export const inserter = (update: {[string]: PeerBundle}, prev: {[string]: PeerBundle}) => {
Object.keys(update).forEach((ip) => { Object.keys(update).forEach((ip) => {
if (!update[ip]) { if (!update[ip]) {
@ -95,6 +98,8 @@ export type Props = {
shouldUpdate: Object, shouldUpdate: Object,
}; };
type State = {};
// Network renders the network page. // Network renders the network page.
class Network extends Component<Props, State> { class Network extends Component<Props, State> {
formatTime = (t) => { formatTime = (t) => {

View file

@ -18,9 +18,12 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List'; import List from '@material-ui/core/List';
import Icon from 'material-ui/Icon'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Icon from '@material-ui/core/Icon';
import Transition from 'react-transition-group/Transition'; import Transition from 'react-transition-group/Transition';
import {Icon as FontAwesome} from 'react-fa'; import {Icon as FontAwesome} from 'react-fa';
@ -57,9 +60,11 @@ export type Props = {
changeContent: string => void, changeContent: string => void,
}; };
type State = {}
// SideBar renders the sidebar of the dashboard. // SideBar renders the sidebar of the dashboard.
class SideBar extends Component<Props> { class SideBar extends Component<Props, State> {
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
return nextProps.opened !== this.props.opened; return nextProps.opened !== this.props.opened;
} }

View file

@ -16,10 +16,8 @@
// fa-only-woff-loader removes the .eot, .ttf, .svg dependencies of the FontAwesome library, // fa-only-woff-loader removes the .eot, .ttf, .svg dependencies of the FontAwesome library,
// because they produce unused extra blobs. // because they produce unused extra blobs.
module.exports = function(content) { module.exports = content => content
return content
.replace(/src.*url(?!.*url.*(\.eot)).*(\.eot)[^;]*;/, '') .replace(/src.*url(?!.*url.*(\.eot)).*(\.eot)[^;]*;/, '')
.replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/, '') .replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/, '')
.replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/, '') .replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/, '')
.replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/, ';'); .replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/, ';');
};

View file

@ -21,6 +21,6 @@
</head> </head>
<body style="height: 100%; margin: 0"> <body style="height: 100%; margin: 0">
<div id="dashboard" style="height: 100%"></div> <div id="dashboard" style="height: 100%"></div>
<script src="bundle.js"></script> <script type="text/javascript" src="bundle.js"></script>
</body> </body>
</html> </html>

View file

@ -19,8 +19,8 @@
import React from 'react'; import React from 'react';
import {render} from 'react-dom'; import {render} from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import createMuiTheme from 'material-ui/styles/createMuiTheme'; import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import Dashboard from './components/Dashboard'; import Dashboard from './components/Dashboard';

View file

@ -1,48 +1,61 @@
{ {
"dependencies": { "dependencies": {
"babel-core": "^6.26.0", "@material-ui/core": "^1.4.3",
"babel-eslint": "^8.2.1", "@material-ui/icons": "^2.0.1",
"babel-loader": "^7.1.2", "babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-flow-strip-types": "^6.22.0", "babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", "babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0", "babel-runtime": "^6.26.0",
"classnames": "^2.2.5", "classnames": "^2.2.6",
"css-loader": "^0.28.9", "css-loader": "^1.0.0",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"eslint": "^4.16.0", "eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0", "eslint-config-airbnb": "^17.0.0",
"eslint-loader": "^2.0.0", "eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.41.0", "eslint-loader": "^2.1.0",
"eslint-plugin-import": "^2.8.0", "eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-import": "^2.13.0",
"eslint-plugin-react": "^7.5.1", "eslint-plugin-jsx-a11y": "^6.1.1",
"file-loader": "^1.1.6", "eslint-plugin-node": "^7.0.1",
"flow-bin": "^0.63.1", "eslint-plugin-prettier": "^2.6.2",
"flow-bin-loader": "^1.0.2", "eslint-plugin-promise": "^3.8.0",
"flow-typed": "^2.2.3", "eslint-plugin-react": "^7.10.0",
"material-ui": "^1.0.0-beta.30", "file-loader": "^1.1.11",
"material-ui-icons": "^1.0.0-beta.17", "flow-bin": "^0.78.0",
"flow-bin-loader": "^1.0.3",
"flow-typed": "^2.5.1",
"path": "^0.12.7", "path": "^0.12.7",
"react": "^16.2.0", "prettier": "^1.14.2",
"react-dom": "^16.2.0", "prettier-eslint": "^8.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-fa": "^5.0.0", "react-fa": "^5.0.0",
"react-transition-group": "^2.2.1", "react-transition-group": "^2.4.0",
"recharts": "^1.0.0-beta.9", "recharts": "^1.1.0",
"style-loader": "^0.19.1", "style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.2.7",
"url": "^0.11.0", "url": "^0.11.0",
"url-loader": "^0.6.2", "url-loader": "^1.0.1",
"webpack": "^3.10.0", "webpack": "^4.16.5",
"webpack-dev-server": "^2.11.1" "webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}, },
"scripts": { "scripts": {
"build": "NODE_ENV=production webpack", "build": "NODE_ENV=production webpack",
"stats": "webpack --profile --json > stats.json", "stats": "webpack --profile --json > stats.json",
"dev": "webpack-dev-server --port 8081", "dev": "webpack-dev-server",
"flow": "flow-typed install" "install-flow": "flow-typed install",
} "flow": "flow status --show-all-errors",
"eslint": "eslint **/*",
"lint": "yarn eslint && yarn flow",
"eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check"
},
"license": "LGPL-3.0-or-later"
} }

View file

@ -15,23 +15,48 @@
// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>. // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
const webpack = require('webpack'); const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
mode: 'development',
target: 'web',
entry: {
bundle: './index',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, ''),
// sourceMapFilename: '[file].map',
},
resolve: { resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'components'), // import './components/Component' -> import 'Component'
],
// alias: {
// root: path.resolve(__dirname, ''),
// },
extensions: ['.js', '.jsx'], extensions: ['.js', '.jsx'],
}, },
entry: './index', // devtool: 'source-map',
optimization: {
minimize: true,
namedModules: true, // Module names instead of numbers - resolves the large diff problem.
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: true,
output: { output: {
path: path.resolve(__dirname, ''), comments: false,
filename: 'bundle.js', beautify: true,
},
},
// sourceMap: true,
}),
],
}, },
plugins: [ plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
mangle: false,
beautify: true,
}),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
PROD: process.env.NODE_ENV === 'production', PROD: process.env.NODE_ENV === 'production',
}), }),
@ -61,17 +86,32 @@ module.exports = {
], ],
}, },
{ {
test: /font-awesome\.css$/, test: /\.css$/,
oneOf: [
{
test: /font-awesome/,
use: [ use: [
'style-loader', 'style-loader',
'css-loader', 'css-loader',
path.resolve(__dirname, './fa-only-woff-loader.js'), path.resolve(__dirname, './fa-only-woff-loader.js'),
], ],
}, },
{
use: [
'style-loader',
'css-loader',
],
},
],
},
{ {
test: /\.woff2?$/, // font-awesome icons test: /\.woff2?$/, // font-awesome icons
use: 'url-loader', use: 'url-loader',
}, },
], ],
}, },
devServer: {
port: 8081,
compress: true,
},
}; };

File diff suppressed because it is too large Load diff