Fix webpack (#789)

* eslint fixes

* add BabiliPlugin

* Add `-chunk` to prod config

Author: mmahalwy

README.md

@@ -15,7 +15,7 @@ Read the [contributing] section before creating an issue.
 - Ensure you have [nodejs] installed
 - Get the source by running `git clone https://github.com/quran/quran.com-frontend/` or creating a [fork]
 - Run `npm install` to do first time installation of all dependencies
-- Run `npm run dev` to start the dev server
+- Run `npm run dev` to start the dev server. Make sure you have pm2 installed globally! `npm install -g pm2`
 - Open `http://localhost:8000` in your browser to see the app.
 
 ## Staging

package.json

@@ -12,7 +12,7 @@
     "test:dev:lint": "./node_modules/eslint/bin/eslint.js ./src",
     "test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
     "dev-old": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
-    "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node --expose-gc ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/dev.config.js & env NODE_PATH='./src' PORT=8000 node --expose-gc ./bin/server.js",
+    "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node --expose-gc ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/dev.config.js --progress  & env NODE_PATH='./src' PORT=8000 node --expose-gc ./bin/server.js",
     "start": "NODE_PATH='src' node ./start",
     "build": "npm run build:client & npm run build:server",
     "build:server": "babel ./src -d ./dist -D",
@@ -44,7 +44,7 @@
     "autoprefixer-loader": "3.2.0",
     "babel-cli": "6.11.4",
     "babel-core": "^6.24.0",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-plugin-add-module-exports": "0.1.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-system-import-transformer": "^3.1.0",
@@ -58,12 +58,14 @@
     "babel-polyfill": "6.13.0",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-react": "6.11.1",
+    "babel-preset-react-optimize": "^1.0.1",
     "babel-preset-stage-0": "6.5.0",
     "babel-preset-stage-2": "6.13.0",
     "babel-register": "6.11.6",
     "babel-runtime": "6.11.6",
+    "babili-webpack-plugin": "^0.0.11",
     "body-parser": "1.15.2",
-    "bootstrap-loader": "2.0.0-beta.19",
+    "bootstrap-loader": "^2.1.0",
     "bootstrap-sass": "3.3.7",
     "bundle-loader": "0.5.4",
     "cache-manager": "1.5.0",
@@ -82,7 +84,7 @@
     "express": "4.14.0",
     "express-state": "1.4.0",
     "express-useragent": "1.0.4",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
+    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "0.8.5",
     "fontfaceobserver": "1.7.3",
     "history": "^3.0.0",
@@ -112,7 +114,7 @@
     "react-cookie": "1.0.4",
     "react-dom": "15.4.1",
     "react-helmet": "3.1.0",
-    "react-hot-loader": "3.0.0-beta.6",
+    "react-hot-loader": "next",
     "react-inlinesvg": "0.5.4",
     "react-intl": "2.1.5",
     "react-loadable": "^3.3.1",
@@ -131,7 +133,7 @@
     "reselect": "2.5.3",
     "resolve-url": "0.2.1",
     "resolve-url-loader": "1.6.1",
-    "sass-loader": "4.1.1",
+    "sass-loader": "^6.0.5",
     "serialize-javascript": "1.3.0",
     "serve-favicon": "2.3.0",
     "sitemap": "1.8.1",
@@ -140,8 +142,9 @@
     "superagent": "3.3.1",
     "url": "0.11.0",
     "url-loader": "0.5.7",
-    "webpack": "2.2.0",
-    "webpack-dev-server": "2.1.0-beta.0",
+    "webpack": "^2.5.1",
+    "webpack-dev-middleware": "^1.10.2",
+    "webpack-dev-server": "^2.4.5",
     "webpack-isomorphic-tools": "2.5.7",
     "winston": "1.1.2"
   },
@@ -186,14 +189,15 @@
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",
     "redbox-react": "1.1.1",
-    "redux-devtools": "3.1.1",
+    "redux-devtools": "^3.4.0",
     "redux-devtools-dock-monitor": "1.1.0",
     "redux-devtools-log-monitor": "1.0.5",
     "sinon": "1.15.3",
     "sinon-chai": "2.8.0",
     "stylelint": "7.1.0",
     "stylelint-webpack-plugin": "0.2.0",
     "webpack-bundle-analyzer": "2.2.1",
+    "webpack-dashboard": "^0.4.0",
     "webpack-dev-server": "2.1.0-beta.0",
     "webpack-hot-middleware": "2.12.2"
   }

src/client.js

@@ -1,26 +1,23 @@
 /* global document, window, $ */
-import 'babel-polyfill';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import reactCookie from 'react-cookie';
-import Provider from 'react-redux/lib/components/Provider';
 import Router from 'react-router/lib/Router';
 import match from 'react-router/lib/match';
 import browserHistory from 'react-router/lib/browserHistory';
 import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
 import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
-import { IntlProvider } from 'react-intl';
+import { AppContainer } from 'react-hot-loader';
 
 import debug from 'debug';
 
 import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
-import getLocalMessages from './helpers/setLocal';
+import Root from './containers/Root';
 
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
@@ -45,31 +42,47 @@ window.clearCookies = () => {
   reactCookie.remove('smartbanner-installed');
 };
 
-match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
-  const component = (
-    <Router
-      {...renderProps}
-      render={props => (
-        <ReduxAsyncConnect
-          {...props}
-          helpers={{ client }}
-          render={applyRouterMiddleware(useScroll())}
-        />
-      )}
-    />
-  );
+match(
+  { history, routes: routes(store) },
+  (error, redirectLocation, renderProps) => {
+    const component = (
+      <Router
+        {...renderProps}
+        render={props => (
+          <ReduxAsyncConnect
+            {...props}
+            helpers={{ client }}
+            render={applyRouterMiddleware(useScroll())}
+          />
+        )}
+      />
+    );
+
+    const mountNode = document.getElementById('app');
+
+    debug('client', 'React Rendering');
 
-  const mountNode = document.getElementById('app');
+    ReactDOM.render(
+      <AppContainer>
+        <Root component={component} store={store} />
+      </AppContainer>,
+      mountNode,
+      () => {
+        debug('client', 'React Rendered');
+      }
+    );
 
-  debug('client', 'React Rendering');
+    if (module.hot) {
+      module.hot.accept('./containers/Root', () => {
+        const NextRoot = require('./containers/Root'); // eslint-disable-line global-require
 
-  ReactDOM.render(
-    <IntlProvider locale="en" messages={getLocalMessages()}>
-      <Provider store={store} key="provider">
-        {component}
-      </Provider>
-    </IntlProvider>, mountNode, () => {
-      debug('client', 'React Rendered');
+        ReactDOM.render(
+          <AppContainer>
+            <NextRoot store={store} component={component} />
+          </AppContainer>,
+          document.getElementById('root')
+        );
+      });
     }
-  );
-});
+  }
+);