Update webpack config and update packages

.gitignore

@@ -53,3 +53,5 @@ google.key.json
 .iml
 
 kubeconfig.yml
+
+stats.json

README.md

@@ -66,6 +66,13 @@ $ mix issues.upload # Upsert issues by name in db
 #If you use docker in dev env, run commands in make compose-bash
 ```
 
+### Profile js bundle
+To build stat.json and see details in browser run:
+```
+yarn profile:build
+yarn profile:visualize
+```
+
 ### Support
 
 - <https://hexlet-ru.slack.com> channel: codebattle

services/app/.babelrc

@@ -2,11 +2,15 @@
   "presets": [
     ["@babel/env", {
       "targets": { "node": "current" },
-      "ignoreBrowserslistConfig": true
+      "ignoreBrowserslistConfig": true,
+      "useBuiltIns": "usage",
+      "corejs": 3
     }],
     "@babel/react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining",
+    "lodash"
   ]
 }

services/app/Dockerfile

@@ -18,10 +18,10 @@ COPY . .
 
 RUN yarn install --froze-lockfile
 
-RUN ./node_modules/webpack/bin/webpack.js --mode production \
+RUN yarn build \
   && mix phx.digest
 
-RUN mix release  \
+RUN mix release \
   && mv _build/${build_env}/rel/${app_name} /opt/release
 
 FROM alpine:3.9.4

services/app/assets/js/app.js

@@ -13,8 +13,9 @@
 //
 // If you no longer want to use a dependency, remember
 // to also remove its path from "config.paths.watched".
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 import 'phoenix_html';
-import '@babel/polyfill';
 import '@fortawesome/fontawesome-free/js/all';
 import 'bootstrap';
 import NProgress from 'nprogress';

services/app/package.json

@@ -7,10 +7,10 @@
   ],
   "scripts": {
     "test": "jest",
-    "watch": "webpack --watch-stdin --color --mode development",
-    "profile": "webpack --profile --json > stats.json",
-    "build-dev": "webpack --mode development",
-    "build-prod": "NODE_ENV=production webpack -p --mode production",
+    "watch": "webpack-dev-server --config ./webpack/webpack.dev.config.js",
+    "profile:build": "webpack --config ./webpack/webpack.build.config.js --profile --json > stats.json",
+    "profile:visualize": "npx webpack-bundle-analyzer stats.json",
+    "build": "webpack --config ./webpack/webpack.build.config.js",
     "lint": "eslint --ext js,jsx ./assets/js"
   },
   "jest": {
@@ -21,22 +21,22 @@
     }
   },
   "dependencies": {
-    "@babel/polyfill": "^7.10.1",
+    "@babel/runtime": "^7.10.5",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/react-fontawesome": "^0.1.10",
     "@reduxjs/toolkit": "^1.3.6",
     "axios": "^0.19.2",
-    "babel-runtime": "^6.26.0",
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
+    "core-js": "3.6",
     "emoji-mart": "^3.0.0",
     "font-mfizz": "^2.4.1",
     "humps": "^2.0.1",
     "i18next": "^19.4.5",
     "jquery": "^3.5.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
     "mini-css-extract-plugin": "^0.9.0",
     "moment": "^2.26.0",
     "monaco-ace-tokenizer": "^0.2.0",
@@ -59,7 +59,7 @@
     "react-js-pagination": "^3.0.3",
     "react-loading": "^2.0.3",
     "react-markdown": "^4.3.1",
-    "react-monaco-editor": "^0.36.0",
+    "react-monaco-editor": "^0.39.1",
     "react-player-controls": "^1.1.0",
     "react-redux": "^7.2.0",
     "react-stay-scrolled": "^7.1.0",
@@ -68,20 +68,23 @@
     "set-value": "^3.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-decorators": "^7.10.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
+    "babel-plugin-lodash": "^3.3.4",
     "copy-webpack-plugin": "^6.0.2",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "2.20.2",
@@ -90,7 +93,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "exports-loader": "^0.7.0",
+    "exports-loader": "^1.1.0",
     "file-loader": "^6.0.0",
     "i18next-po-loader": "^1.0.0",
     "image-webpack-loader": "^6.0.0",
@@ -103,9 +106,9 @@
     "resolve-url-loader": "^3.1.1",
     "sass-loader": "^8.0.2",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.0.9"
   }
 }

services/app/webpack/webpack.base.config.js

@@ -0,0 +1,88 @@
+const path = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const env = process.env.NODE_ENV || 'development';
+const isProd = env === 'production';
+
+module.exports = {
+  entry: {
+    app: ['./assets/js/app.js', './assets/css/style.scss'],
+  },
+  output: {
+    path: path.resolve(__dirname, '../priv/static/assets'),
+    filename: '[name].js',
+    sourceMapFilename: '[name].js.map',
+    publicPath: '/assets/',
+  },
+  externals: {
+    gon: 'Gon',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.po$/,
+        loaders: ['i18next-po-loader'],
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: !isProd,
+            },
+          },
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ],
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        use: 'url-loader',
+      },
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [{ from: 'assets/static' }],
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+      Popper: ['popper.js', 'default'],
+    }),
+    new MonacoWebpackPlugin({
+      languages: [
+        'ruby',
+        'javascript',
+        'typescript',
+        'python',
+        'clojure',
+        'php',
+        'go',
+      ],
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'style.css',
+    }),
+    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /(en|ru)$/),
+  ],
+  watchOptions: {
+    aggregateTimeout: 300,
+    poll: 1000,
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+};

services/app/webpack/webpack.build.config.js

@@ -0,0 +1,20 @@
+const { merge } = require('webpack-merge');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const baseWebpackConfig = require('./webpack.base.config');
+
+const buildWebpackConfig = merge(baseWebpackConfig, {
+  mode: 'production',
+  plugins: [
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /\.css$/g,
+      cssProcessorPluginOptions: {
+        preset: ['default', { discardComments: { removeAll: true } }],
+      },
+      canPrint: true,
+    }),
+  ],
+});
+
+module.exports = new Promise(resolve => {
+  resolve(buildWebpackConfig);
+});