migration

Author: MacKentoch

front/package.json

@@ -30,7 +30,7 @@
     "postprod": "react-snap",
     "analyze": "rimraf docs/assets && cross-env NODE_ENV=production webpack -p --config webpack.analyze.config.js",
     "prestart": "npm run clean-docs",
-    "start": "cross-env NODE_ENV=dev webpack-dev-server --hot --config ./webpack.hot.reload.config.js --mode development"
+    "start": "cross-env NODE_ENV=dev webpack-dev-server --hot --config ./webpack.hot.reload.config.js"
   },
   "reactSnap": {
     "source": "docs"

front/src/Root.tsx

@@ -4,6 +4,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import { Switch, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
+import { hot } from 'react-hot-loader';
 import configureStore from './redux/store/configureStore';
 import { history } from './redux/store/configureStore';
 import ScrollTop from './components/scrollToTop/ScrollToTop';
@@ -55,4 +56,4 @@ class Root extends Component<Props, State> {
   }
 }
 
-export default Root;
+export default hot(module)(Root);

front/src/index.tsx

@@ -1,8 +1,8 @@
 // import 'babel-polyfill';
-import "core-js/stable";
-import "regenerator-runtime/runtime";
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { hot } from 'react-hot-loader/root';
+// import { hot } from 'react-hot-loader/root';
 import React from 'react';
 import { hydrate, render } from 'react-dom';
 import smoothScrollPolyfill from 'smoothscroll-polyfill';
@@ -19,15 +19,16 @@ smoothScrollPolyfill.polyfill();
 (window as any).__forceSmoothScrollPolyfill__ = true;
 (window as any).snapSaveState = () => getState();
 
-;(async () => {
-  console.log('You have async support if you read this instead of "ReferenceError: regeneratorRuntime is not defined" error.');
-})()
+(async () => {
+  console.log(
+    'You have async support if you read this instead of "ReferenceError: regeneratorRuntime is not defined" error.',
+  );
+})();
 // #endregion
 
 // render app (hydrate for react-snap):
 function renderApp(RootComponent: any) {
-  // @ts-ignore
-  const Application = hot(RootComponent);
+  const Application = RootComponent;
   // needed for react-snap:
   bootstrapedElement && bootstrapedElement.hasChildNodes()
     ? loadComponents().then(() => hydrate(<Application />, bootstrapedElement))

front/tsconfig.json

@@ -6,7 +6,6 @@
     "lib": ["dom", "es2015", "esnext"],
     "module": "commonjs",
     "moduleResolution": "node",
-    "allowJs": false,
     "checkJs": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -19,7 +18,7 @@
     "resolveJsonModule": true,
     "outDir": "../dist/assets"
   },
-  "include": ["./src"],
-  "exclude": ["node_modules", "webpack.*"]
+  "include": ["./src"]
+  // "exclude": ["node_modules", "webpack.*"]
   // "exclude": ["node_modules", "!node_modules/@types", "*.d.ts"]
 }

front/webpack.hot.reload.config.js

@@ -149,10 +149,16 @@ const indexFile = path.join(__dirname, 'src/index.tsx');
 // };
 
 const config = {
-  entry: ['./src'],
+  mode: 'development',
+  target: 'web',
+  devtool: 'eval-source-map',
+  entry: {
+    app: [indexFile],
+  },
   output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
+    path: path.join(__dirname, 'docs'),
+    filename: '[name].js',
+    chunkFilename: '[name].js',
   },
   resolve: {
     modules: ['node_modules'],
@@ -172,7 +178,6 @@ const config = {
         exclude: [nodeModulesDir],
         use: ['awesome-typescript-loader'],
       },
-
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
@@ -191,12 +196,45 @@ const config = {
       },
     ],
   },
-  devtool: 'eval-source-map',
+  optimization: {
+    runtimeChunk: false,
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+        styles: {
+          name: 'styles',
+          test: /\.css$/,
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+  devServer: {
+    host: 'localhost',
+    port: 3001,
+    historyApiFallback: true,
+    contentBase: path.join(__dirname, 'temp'),
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
   plugins: [
     new HtmlWebpackPlugin({
       template: 'index.html',
     }),
     new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('dev'),
+      },
+    }),
+    new ProgressBarPlugin({
+      format: 'Build [:bar] :percent (:elapsed seconds)',
+      clear: false,
+    }),
   ],
 };