Added major improvements and optimizations inside Webpack Configurati…

…on file

.babelrc

@@ -1,19 +1,12 @@
 {
   "presets": [
-    ["@babel/env", {
-      "targets": {
-        "browsers": ["last 2 versions"]
-      }
-    }],
+    "@babel/env",
     "@babel/react",
     "@babel/typescript"
   ],
   "plugins": [
+    "@babel/plugin-transform-object-assign",
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-syntax-dynamic-import",
-    ["@babel/plugin-transform-async-to-generator", {
-      "module": "bluebird",
-      "method": "coroutine"
-    }]
+    "@babel/plugin-syntax-dynamic-import"
   ]
 }

.eslintrc

@@ -243,7 +243,7 @@
       "react/jsx-first-prop-new-line": 1,
       "react/jsx-one-expression-per-line": 0,
       "react/prefer-stateless-function": [
-        1,
+        0,
         {
           "ignorePureComponents": true
         }

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## Webpack4 - React16.7 Templater App
 
 
+# 0.7.0
+ * Added major improvements and optimizations inside Webpack Configuration file.
+
 # 0.6.0
  * Major update of dependencies and devDependencies.
  * Updated eslint config.

package.json

@@ -138,14 +138,21 @@
     "stylelint-scss": "^3.4.4",
     "ts-jest": "^23.10.5",
     "tslint": "^5.12.0",
+    "tslint-config-airbnb": "^5.11.1",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^3.6.0",
     "url-loader": "^1.1.2",
     "webpack-bundle-analyzer": "^3.0.3"
   },
   "dependencies": {
     "@babel/core": "^7.1.5",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-async-to-generator": "^7.1.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
+    "@babel/plugin-transform-object-assign": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
@@ -164,6 +171,8 @@
     "connect-history-api-fallback": "^1.5.0",
     "connected-react-router": "^6.1.0",
     "debug": "^4.1.1",
+    "eslint-loader": "^2.1.1",
+    "exports-loader": "^0.7.0",
     "history": "^4.7.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
@@ -181,6 +190,9 @@
     "redux-saga": "^0.16.2",
     "redux-saga-watch-actions": "^0.2.0",
     "regenerator-runtime": "^0.13.1",
+    "terser-webpack-plugin": "^1.2.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "^3.2.2",
     "uglifyjs-webpack-plugin": "^2.1.1",
     "webpack": "^4.28.3",
     "webpack-cli": "^3.1.2",

src/components/Body.js

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import styles from '../styles/index.scss';
+
+class Body extends PureComponent {
+  render() {
+    return (
+      <div className={styles.body}>
+        <img
+          className={styles.bodyImg}
+          src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png'
+          alt='main_img'
+        />
+      </div>
+    );
+  }
+}
+
+export default Body;

src/components/Header.js

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react';
 import styles from '../styles/index.scss';
+
 class Header extends PureComponent {
   render() {
-    return (
-      <div className={styles.appHeader}>App Headers</div>
-    );
+    return <div className={styles.appHeader}>App Headers</div>;
   }
 }
 

src/components/index.js

@@ -1,6 +1,5 @@
 import Header from './Header';
 import Footer from './Footer';
-import HelloWorld from './HelloWorld';
-
-export { Header, Footer, HelloWorld };
+import Body from './Body';
 
+export { Header, Footer, Body };

src/container/index.js

@@ -1,9 +1,10 @@
 import { PropTypes } from 'prop-types';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Switch, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import { ConnectedRouter } from 'connected-react-router';
-import { Header, Footer, HelloWorld } from '../components';
+
+import { Header, Footer, Body } from '../components';
 import styles from '../styles/index.scss';
 
 const AppContainer = ({ store, history }) => {
@@ -12,9 +13,7 @@ const AppContainer = ({ store, history }) => {
       <ConnectedRouter history={history}>
         <div className={styles.appWrapper}>
           <Header />
-          <Switch location={location}>
-            <Route exact path='/' component={HelloWorld} />
-          </Switch>
+          <Route exact path='/' component={Body} />
           <Footer />
         </div>
       </ConnectedRouter>

src/controller/initialState.js

@@ -1,6 +1,6 @@
 const initialState = {
-  common: {
-    appName: 'react-suspense'
+  app: {
+    appName: 'reactStarterKit'
   }
 };
 

src/controller/middleware/rootReducer.js

@@ -1,13 +1,12 @@
 import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
-import common from '../reducers';
+import app from '../../modules/reducers';
 import history from '../history';
 
 const makeRootReducer = asyncReducers => {
   return combineReducers({
     ...asyncReducers,
-    common,
-    // routing
+    app,
     router: connectRouter(history)
   });
 };

src/controller/middleware/rootSaga.js

@@ -1,16 +1,16 @@
-// saga entry point - propbably you do not need it
+// saga entry point - propbably you don't need this
 import createSagaMiddleware from 'redux-saga';
 import { all } from 'redux-saga/effects';
 import createSagaMiddlewareHelpers from 'redux-saga-watch-actions/lib/middleware';
-import someSaga from '../saga';
+import watchSagas from '../../modules/saga';
 
 const sagaMiddleware = createSagaMiddleware();
 const runSaga = saga => sagaMiddleware.run(saga);
 
 const { injectSaga, cancelTask } = createSagaMiddlewareHelpers(sagaMiddleware); // <-- bind to sagaMiddleware.run
 
 export function* rootSaga() {
-  yield all([someSaga()]);
+  yield all([watchSagas()]);
 }
 
 export { cancelTask, injectSaga, runSaga };

src/index.js

@@ -25,7 +25,7 @@ if (__DEV__) {
   // ========================================================
   const devRender = () => {
     if (module.hot) {
-      module.hot.accept('./container/index.js', () => render());
+      module.hot.accept('./container/index', () => render());
     }
 
     render();

src/controller/reducers.js → src/modules/reducers.js

@@ -1,6 +1,6 @@
 import { LOCATION_CHANGE } from 'connected-react-router';
 import { COUNT_ADD, SOME_ASYNC_ACTION } from '../constants';
-import initialState from './initialState';
+import initialState from '../controller/initialState';
 
 // ------------------------------------
 // Action Handlers

src/controller/saga/index.js → src/modules/saga/index.js

@@ -1,7 +1,7 @@
 import { takeLatest } from 'redux-saga/effects';
-import { testSaga } from './testSaga';
+import { someSaga } from './someSaga';
 import { SOME_SAGA } from '../../constants';
 
 export default function* watchSagas() {
-  yield takeLatest(SOME_SAGA, testSaga);
+  yield takeLatest(SOME_SAGA, someSaga);
 }

src/controller/saga/testSaga.js → src/modules/saga/someSaga.js

@@ -1,7 +1,7 @@
 import { put } from 'redux-saga/effects';
 import { someAsyncAction } from '../actions';
 
-export function* testSaga() {
+export function* someSaga() {
   try {
     const payload = yield fetch('https://www.github.com');
 
@@ -15,4 +15,4 @@ export function* testSaga() {
   }
 }
 
-export default testSaga;
+export default someSaga;

src/styles/index.scss

@@ -1,38 +1,41 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+* {
+  color: white;
+  font-family: 'Roboto', sans-serif;
+}
+
 .appWrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 
 .extra {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 25vh;
-  font-size: 25px;
-  text-align: center;
+  width: 300px;
+  height: 30px;
+  background: linear-gradient(to right, #1110 0%, #f9db2d 50%, #1110 100%);
 }
 
 .appHeader {
   composes: extra;
-  background: green;
 }
 
-.helloWorld {
-  composes: extra;
-  background: red;
+.body {
+  display: block;
 }
 
-.helloStart {
-  composes: extra;
-  color: purple;
+.bodyImg {
+  margin: 40px;
+  width: 50vh;
 }
 
 .appFooter {
   composes: extra;
-  background: yellow;
 }

tslint.json

@@ -18,7 +18,8 @@
       "check-type"
     ],
     "arrow-return-shorthand": [false],
-    "semicolon": [true, "never"],
+    "semicolon": [true, "always", "ignore-interfaces"],
+    "space-in-parens": [true, "always"],
     "block-spacing": [
       true,
       "never"