done some preparation before wh has been started

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "loose": true,
+        "useBuiltIns": "usage",
+        "corejs": 3
+      }
+    ]
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.browserslistrc

@@ -0,0 +1,9 @@
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
+
+[production]
+>0.2%
+not dead
+not op_mini all

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,68 @@
+# production
+/build
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

html-css/css/style.css

@@ -1,179 +0,0 @@
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-.signInForm{
-  margin: 0 auto;
-  margin-bottom: 20px;
-  width: 600px;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  background-color: blueviolet;
-  padding: 5px;
-  border-radius: 10px;
-  border: solid 2px black;
-}
-
-
-.passwordInput , .loginInput ,.confirmPasswordInput{
-  font-size: 18px;
-  color: rgb(94, 91, 91);
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.hiddenInput {
-  display: none;
-}
-.passwordInput::placeholder{
-  font-size: 18px;
-  background: -webkit-linear-gradient(left, rgb(8, 8, 8) 0%, rgb(2, 2, 2) 65%,red 60%, red 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.labelCheckBox{
-  font-size: 18px;
-  color: rgb(183, 184, 184);
-  display: flex;
-  align-items: center;
-}
-
-.btnSubmit{
-  width: auto;
-  background-color: black;
-  border-radius: 10px;
-  border: solid 2px rgb(8, 31, 243);
-  font-size: 28px;
-  color: white;
-}
-
-.btnSubmit__disable     {
-  border-radius: 10px;
-  font-size: 28px;
-  width: auto;
-  pointer-events: none;
-  color: #c0c0c0;
-  border: solid 2px rgb(133, 132, 132);
-  background-color: #ffffff;
-  cursor: not-allowed;
-}
-
-.formWrapper{
-  margin: 0 auto;
-  width: 100%;
-  padding: 20px;
-  background-color: rgb(219, 214, 214);
-  border: solid 5px grey;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.placeholderForm{
-  position: relative;
-  width: 340px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 5px;
-  text-transform: uppercase;
-}
-
-.title{
-  display: block;
-  width: 100%;
-  position: relative;
-  margin-bottom: 5px;
-}
-
-.title::before{
-  content: '*';
-  color: red;
-}
-
-.warningSpan{
-  display: inline;
-  width: 340px;
-  text-align: left;
-  padding-left: 5px;
-  font-size: 17px;
-  color: rgb(252, 14, 14);
-  text-transform: none;
-}
-
-.warningSpan--hidden{
-    display: none;
-}
-
-.formInput {
-  height: 40px;
-  width: 340px;
-  color: white;
-  font-size: 18px;
-  background-color: grey;
-  border: solid 2px rgb(240, 236, 236);
-  border-radius: 10px;
-  outline: none;
-  padding-left: 10px;
-  margin-bottom: 5px;
-}
-
-
-.wrongField{
-border: solid 2px red;
-color: red;
-}
-
-.rightInput {
-  color: green;
-  border: solid 2px green;
-}
-
-.placeholderWrong{
-  color: red;
-}
-
-.placeholderRight{
-  color: green;
-}
-
-.btnWrapper{
-  padding: 10px;
-  display: flex;
-  justify-content: center;
-  background-color: grey;
-  margin-bottom: 20px;
-}
-
-.okButton{
-  margin-right: 20px;
-  background-color: green;
-  color: white;
-  border-radius: 5px;
-}
-
-.cancelButton{
-  margin-right: 20px;
-  background-color: rgb(248, 15, 15);
-  color: white;
-  border-radius: 5px;
-}
-.cancelButton , .okButton {
-  font-size: 25px;
-}
-
-
-
-
-
-
-
-

html-css/images/icon-close.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"/><path d="M0 0h24v24H0z" fill="none"/></svg>

html-css/images/left-arrow.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
-<path  d="M239.077,245.333L466.213,18.219c4.171-4.16,4.179-10.914,0.019-15.085
-	c-2.006-2.011-4.731-3.139-7.571-3.134h-192c-2.831-0.005-5.548,1.115-7.552,3.115L24.443,237.781
-	c-4.164,4.165-4.164,10.917,0,15.083l234.667,234.667c2.001,2.007,4.718,3.135,7.552,3.136h192
-	c5.891,0.011,10.675-4.757,10.686-10.648c0.005-2.84-1.123-5.565-3.134-7.571L239.077,245.333z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

html-css/images/right-arrow.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
-<path  d="M466.219,237.781L231.552,3.115C229.548,1.115,226.831-0.005,224,0H32
-	c-5.891-0.011-10.675,4.757-10.686,10.648c-0.005,2.84,1.123,5.565,3.134,7.571l227.136,227.115L24.448,472.448
-	c-4.171,4.16-4.179,10.914-0.019,15.085c2.006,2.011,4.731,3.139,7.571,3.134h192c2.831,0.005,5.548-1.115,7.552-3.115
-	l234.667-234.667c4.171-4.16,4.179-10.914,0.019-15.085C466.231,237.794,466.225,237.788,466.219,237.781z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

html-css/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" lang="uk">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
-		<title>Homework</title>
-		<link rel="stylesheet" href="./css/style.css" />
-	</head>
-	<body> </body>
-	<script src="../javascript/hw.js" type="module"></script>
-</html>

javascript/hw.js

@@ -1 +0,0 @@
-'use strict';

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "webpack-starter-kit",
+  "version": "1.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --env.mode development --config ./webpack/config.js",
+    "build": "webpack --env.mode production --config ./webpack/config.js",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxplanjay/webpack-starter-kit.git"
+  },
+  "keywords": [],
+  "author": "Alexander Repeta <alexander.repeta@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/luxplanjay/webpack-starter-kit/issues"
+  },
+  "homepage": "https://github.com/grisha19961116/goit-js-home-wok-10",
+  "devDependencies": {
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.11.5",
+    "@pnotify/core": "^5.1.2",
+    "autoprefixer": "^9.7.4",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.4.2",
+    "file-loader": "^6.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "gh-pages": "^2.2.0",
+    "handlebars-loader": "^1.7.1",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "img-loader": "^3.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "url-loader": "^4.0.0",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2",
+    "webpackbar": "^4.0.0"
+  },
+  "dependencies": {
+    "basiclightbox": "^5.0.3",
+    "core-js": "^3.6.4",
+    "handlebars": "^4.7.6",
+    "infinite-scroll": "^3.0.6",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
+    "material-design-icons": "^3.0.1",
+    "pnotify": "^5.1.2",
+    "redux": "^4.1.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [autoprefixer]
+};

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Homework</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body></body>
+</html>

src/index.js

@@ -0,0 +1,2 @@
+import './styles.css';
+import './java-script/hw.js';

src/java-script/hw.js

@@ -0,0 +1,13 @@
+import { store } from './redux/store';
+
+store.subscribe(() => console.log(store.getState()));
+
+store.dispatch({ type: 'INCREMENT' });
+
+store.dispatch({ type: 'INCREMENT' });
+
+store.dispatch({ type: 'DECREMENT' });
+
+store.dispatch({ type: 'DECREMENT' });
+
+store.dispatch({ type: 'DECREMENT' });

src/java-script/redux/counter/action/index.js

@@ -0,0 +1,4 @@
+export const counterAction = {
+  INCREMENT: 'INCREMENT',
+  DECREMENT: 'DECREMENT',
+};

src/java-script/redux/counter/reducer/index.js

@@ -0,0 +1,12 @@
+import { counterAction } from '../action';
+
+export function counterReducer(state = 0, action) {
+  switch (action.type) {
+    case counterAction.INCREMENT:
+      return state + 1;
+    case counterAction.DECREMENT:
+      return state - 1;
+    default:
+      return state;
+  }
+}

src/java-script/redux/rootReducer/index.js

@@ -0,0 +1,4 @@
+import { combineReducers } from 'redux';
+import { counterReducer } from '../counter/reducer';
+
+export const rootReducer = combineReducers({ count: counterReducer });

src/java-script/redux/store/index.js

@@ -0,0 +1,4 @@
+import { createStore } from 'redux';
+import { rootReducer } from '../rootReducer';
+
+export const store = createStore(rootReducer);

src/styles.css

@@ -0,0 +1,3 @@
+body {
+    background-color: aquamarine;
+}

webpack/config.js

@@ -0,0 +1,7 @@
+const webpackMerge = require('webpack-merge');
+const loadSharedConfig = require('./configs/shared');
+
+const loadModeConfig = env => require(`./configs/${env.mode}`)(env);
+
+module.exports = env =>
+  webpackMerge(loadSharedConfig(env), loadModeConfig(env));

webpack/configs/development.js

@@ -0,0 +1,38 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const paths = require('../utils/paths');
+
+module.exports = env => ({
+  devtool: 'cheap-eval-source-map',
+  output: {
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+    }),
+  ],
+  devServer: {
+    contentBase: paths.BUILD_DIR,
+    publicPath: '',
+    historyApiFallback: true,
+    compress: true,
+    port: 4042,
+    noInfo: true,
+    quiet: true,
+    clientLogLevel: 'warning',
+    stats: 'errors-only',
+    open: true,
+  },
+});

webpack/configs/production.js

@@ -0,0 +1,58 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = env => ({
+  devtool: 'source-map',
+  output: {
+    filename: '[name].[contenthash].js',
+  },
+  optimization: {
+    moduleIds: 'hashed',
+    runtimeChunk: 'single',
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      minify: {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
+      },
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+      chunkFilename: '[name].[id].[contenthash].css',
+    }),
+    new OptimizeCssAssetsPlugin({}),
+  ],
+});

webpack/configs/shared.js

@@ -0,0 +1,75 @@
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const WebpackBar = require('webpackbar');
+const paths = require('../utils/paths');
+
+module.exports = env => ({
+  mode: env.mode,
+  context: paths.SRC_DIR,
+  entry: './index.js',
+  output: {
+    path: paths.BUILD_DIR,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: paths.SRC_DIR,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(gif|png|jpe?g|svg)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: '[path][name].[ext]',
+              limit: 8192,
+              esModule: false,
+            },
+          },
+          'img-loader',
+        ],
+      },
+      {
+        test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+              limit: 10000,
+              mimetype: 'application/font-woff',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.html$/,
+        use: 'html-loader',
+      },
+      {
+        test: /\.hbs$/,
+        use: 'handlebars-loader',
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new FriendlyErrorsWebpackPlugin(),
+    new WebpackBar(),
+  ],
+});

webpack/utils/paths.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+const paths = {
+  SRC_DIR: path.resolve(__dirname, '../../src'),
+  BUILD_DIR: path.resolve(__dirname, '../../build'),
+};
+
+module.exports = paths;