first commit

.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"
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "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"
+  }
+}

postcss.config.js

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

src/index.html

@@ -0,0 +1,18 @@
+<!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>
+    <h2>FetchBasic</h2>
+    <table class="semen" id="semen"></table>
+    <h2>FetchImproved</h2>
+    <table class="coco" id="coco"></table>
+    <h2>FetchImprovedRecursion</h2>
+    <table class="oil" id="oil"></table>
+  </body>
+</html>

src/index.js

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

src/styles.css

@@ -0,0 +1,52 @@
+body{
+  position: relative;
+  padding-bottom: 300px;
+  background-color: rgb(226, 221, 221);
+  min-height: 100vh;
+}
+button{
+ min-width: 40px;
+ min-height: 20px;
+ background-color: rgb(149, 240, 4);
+ font-size: 14px;
+}
+
+table{
+  max-width: 100%;
+  margin: 0 auto;
+  margin-bottom: 30px;
+}
+
+.semen{
+  background-color: rgb(233, 213, 101);
+  padding: 10px;
+  border-radius: 10px;
+  border: solid 3px orange;
+  color: rgb(247, 45, 9);
+}
+
+.coco{
+  background-color: rgb(50, 177, 236);
+  padding: 10px;
+  border-radius: 10px;
+  border: solid 3px rgb(11, 7, 238);
+  color: rgb(25, 9, 247);
+}
+
+.oil{
+  background-color: rgb(228, 109, 168);
+  padding: 10px;
+  border-radius: 10px;
+  border: solid 3px rgb(238, 7, 7);
+  color: rgb(247, 247, 247);
+}
+
+h2{
+  text-align: center;
+  color: brown;
+}
+
+a{
+  height: auto;
+}
+

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;