Merge pull request #37 from tomik23:small-improvements

Small improvements

README.md

@@ -8,13 +8,13 @@ A version with [webpack 4](https://github.com/tomik23/webpack-boilerplate/tree/w
 
 ## Features
 
-- [Webpack](https://webpack.js.org/) `v5.58.1`
-- [Babel](https://babeljs.io/) `v7.15.8`
-- [Core-js](https://github.com/zloirock/core-js/) `v3.18.2`
+- [Webpack](https://webpack.js.org/) `v5.64.4`
+- [Babel](https://babeljs.io/) `v7.16.0`
+- [Core-js](https://github.com/zloirock/core-js/) `v3.19.3`
 - [Pug](https://github.com/pugjs/) `v3.0.2`
-- [Sass](https://sass-lang.com/) `v1.42.1`
-- [PostCSS](https://postcss.org/) `v8.3.9`
-- [ESLint](https://eslint.org/) `v8.0.0`
+- [Sass](https://sass-lang.com/) `v1.44.0`
+- [postcss-preset-env](https://github.com/csstools/postcss-preset-env) `v7.0.1`
+- [ESLint](https://eslint.org/) `v8.4.0`
 
 ## Clone the repo and install dependencies
 
@@ -65,10 +65,7 @@ npm run prod
 
 - [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and Webpack
 - [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS
-- [`sass`](https://github.com/sass/sass) - Sass makes CSS fun! ;)
 - [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS
-  - [`cssnano`](https://github.com/cssnano/cssnano) - Optimize and compress PostCSS
-  - [`autoprefixer`](https://github.com/postcss/autoprefixer) - Parse CSS and add vendor prefixes
 - [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolves CSS imports into JS
 - [`pug-loader`](https://github.com/pugjs/pug-loader/) - Pug loader template
 - [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM

babelrc.config.js

@@ -0,0 +1,18 @@
+'use strict';
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        // debug: true,
+        // useBuiltIns: 'usage',
+        useBuiltIns: 'entry',
+        corejs: 3,
+        // https://babeljs.io/docs/en/babel-preset-env#loose
+        // https://2ality.com/2015/12/babel6-loose-mode.html#loose-mode
+        loose: true,
+      },
+    ],
+  ],
+};

config/postcss.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   plugins: {
-    'autoprefixer': {},
-    'cssnano': {
-      safe: true
-    }
-  }
-};
+    'postcss-preset-env': {
+      // https://github.com/csstools/postcss-preset-env
+      browsers: 'last 2 versions',
+    },
+  },
+};

config/webpack.common.js

@@ -9,27 +9,27 @@ const config = [
 ];
 
 // configure Babel Loader
-const configureBabelLoader = () => {
-  return {
+const configureBabelLoader = [
+  {
     test: /\.js$/,
     exclude: /node_modules/,
     use: {
       loader: 'babel-loader',
     },
-  };
-};
+  },
+];
 
 // configure Pug Loader
-const configurePugLoader = () => {
-  return {
+const configurePugLoader = [
+  {
     test: /\.pug$/,
     loader: 'pug-loader',
     options: {
       pretty: true,
       self: true,
     },
-  };
-};
+  },
+];
 
 // configure HtmlWebPackPlugin
 const entryHtmlPlugins = config.map(({ site, share }) => {
@@ -49,12 +49,10 @@ const entryHtmlPlugins = config.map(({ site, share }) => {
 });
 
 // configure Output
-const configureOutput = () => {
-  return {
-    path: path.resolve(__dirname, '../docs'),
-    filename: 'vendor/js/[name].[fullhash].js',
-    // assetModuleFilename: 'images/static/[name].[hash][ext]',
-  };
+const configureOutput = {
+  path: path.resolve(__dirname, '../docs'),
+  filename: 'vendor/js/[name].[fullhash].js',
+  // assetModuleFilename: 'images/static/[name].[hash][ext]',
 };
 
 module.exports = {
@@ -71,10 +69,11 @@ module.exports = {
     contact: {
       import: './sources/js/contact.js',
     },
+    // common file that is added to all pages
     share: './sources/js/module/share.js',
   },
   // configuration of output files
-  output: configureOutput(),
+  output: { ...configureOutput },
   module: {
     rules: [
       // Images, fonts, e.t.c: Copy files to build folder
@@ -128,8 +127,8 @@ module.exports = {
         type: 'asset/inline',
       },
 
-      configureBabelLoader(),
-      configurePugLoader(),
+      ...configureBabelLoader,
+      ...configurePugLoader,
     ],
   },
   plugins: [...entryHtmlPlugins],

config/webpack.dev.js

@@ -7,17 +7,15 @@ const { merge } = require('webpack-merge');
 const { cssLoaders } = require('./util');
 
 // Configure Dev Server
-const configureDevServer = () => {
-  return {
-    static: {
-      directory: path.resolve(__dirname, '../sources'),
-      publicPath: '/',
-    },
-    open: true,
-    port: 3000,
-    liveReload: true,
-    hot: true,
-  };
+const configureDevServer = {
+  static: {
+    directory: path.resolve(__dirname, '../sources'),
+    publicPath: '/',
+  },
+  open: true,
+  port: 3000,
+  liveReload: true,
+  hot: true,
 };
 
 module.exports = merge(baseConfig, {
@@ -31,7 +29,7 @@ module.exports = merge(baseConfig, {
 
   // https://webpack.js.org/configuration/target/#root
   target: 'web',
-  devServer: configureDevServer(),
+  devServer: { ...configureDevServer },
   module: {
     rules: [
       {

config/webpack.prod.js

@@ -29,55 +29,55 @@ const oneFileCss = {
 };
 
 // configure Optimization
-const configureOptimization = () => {
-  return {
-    minimize: true,
-    minimizer: [new TerserPlugin()],
-    // ...oneFileCss,
-  };
+const configureOptimization = {
+  minimize: true,
+  minimizer: [new TerserPlugin()],
+  // ...oneFileCss,
 };
 
 // configure MiniCssExtract
-const configureMiniCssExtract = () => {
-  return {
+const configureMiniCssExtract = [
+  {
     filename: 'vendor/css/[name].[fullhash].css',
     chunkFilename: 'vendor/css/[name].[fullhash].css',
-  };
-};
+  },
+];
 
 // configure Service Worker
-const configureSW = () => {
-  return {
+const configureSW = [
+  {
     clientsClaim: true,
     skipWaiting: true,
     directoryIndex: 'index.html',
     offlineGoogleAnalytics: true,
-  };
-};
+
+    // we exclude photos
+    exclude: ['images'],
+  },
+];
 
 // configure Copy
-const configureCopy = () => {
-  return {
-    patterns: [
-      {
-        from: 'sources/assets/',
-        to: 'assets/',
-      },
-      {
-        from: 'sources/images/',
-        to: 'images/',
-        // blocking file copying by plugin webpack will
-        // do it for you and rename it with a hash
-        globOptions: {
-          ignore: ['**.svg'],
-        },
+const configureCopy = {
+  patterns: [
+    {
+      from: 'sources/assets/',
+      to: 'assets/',
+    },
+    {
+      from: 'sources/images/',
+      to: 'images/',
+      // blocking file copying by plugin webpack will
+      // do it for you and rename it with a hash
+      globOptions: {
+        ignore: ['**.svg'],
       },
-    ],
-  };
+    },
+  ],
 };
 
 module.exports = merge(baseConfig, {
   mode: 'production',
+  // line 18 in package.json
   target: 'browserslist',
   module: {
     rules: [
@@ -98,7 +98,6 @@ module.exports = merge(baseConfig, {
       },
     ],
   },
-  optimization: configureOptimization(),
   plugins: [
     // when we run the production build then
     // the docs folder is cleared
@@ -109,14 +108,15 @@ module.exports = merge(baseConfig, {
 
     // we extract scss files from js and create
     // separate files for individual pages
-    new MiniCssExtractPlugin(configureMiniCssExtract()),
+    new MiniCssExtractPlugin(...configureMiniCssExtract),
 
+    // https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
     // we create a service-worker for our data
-    new WorkboxPlugin.GenerateSW(configureSW()),
+    new WorkboxPlugin.GenerateSW(...configureSW),
 
     // we copy all necessary graphic files
     // and assets to build folder
-    new CopyWebpackPlugin(configureCopy()),
+    new CopyWebpackPlugin({ ...configureCopy }),
 
     // we create a global variable that
     // we use in pug and we can use in js
@@ -131,4 +131,11 @@ module.exports = merge(baseConfig, {
       openAnalyzer: true,
     }),
   ],
+  optimization: { ...configureOptimization },
+  performance: {
+    // https://webpack.js.org/configuration/performance/#performancehints
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
 });

docs/about.html

@@ -1 +1 @@
-<!doctype html><html class="about" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - about"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - about</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="vendor/js/about.2740fd07d888f2fbf5a3.js"></script><script defer="defer" src="vendor/js/share.2740fd07d888f2fbf5a3.js"></script><link href="vendor/css/about.2740fd07d888f2fbf5a3.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a class="active" href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>ABOUT ME</h1><img class="responsive" src="images/about.jpg"></body></html>
+<!doctype html><html class="about" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - about"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - about</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="vendor/js/about.f19792375831895581c2.js"></script><script defer="defer" src="vendor/js/share.f19792375831895581c2.js"></script><link href="vendor/css/about.f19792375831895581c2.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a class="active" href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>ABOUT ME</h1><img class="responsive" src="images/about.jpg"></body></html>

docs/contact.html

@@ -1 +1 @@
-<!doctype html><html class="contact" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - contact"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - contact</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="vendor/js/contact.2740fd07d888f2fbf5a3.js"></script><link href="vendor/css/contact.2740fd07d888f2fbf5a3.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a class="active" href="./contact.html" title="CONTACT">contact</a></div><h1>CONTACT</h1><img class="responsive" src="images/contact.jpg"></body></html>
+<!doctype html><html class="contact" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - contact"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - contact</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="vendor/js/contact.f19792375831895581c2.js"></script><link href="vendor/css/contact.f19792375831895581c2.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a class="active" href="./contact.html" title="CONTACT">contact</a></div><h1>CONTACT</h1><img class="responsive" src="images/contact.jpg"></body></html>

docs/index.html

@@ -1 +1 @@
-<!doctype html><html class="index" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - index"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - index</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="vendor/js/index.2740fd07d888f2fbf5a3.js"></script><script defer="defer" src="vendor/js/share.2740fd07d888f2fbf5a3.js"></script><link href="vendor/css/index.2740fd07d888f2fbf5a3.css" rel="stylesheet"></head><body><div class="nav"><a class="active" href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>INDEX</h1><img class="responsive" src="images/index.jpg"></body></html>
+<!doctype html><html class="index" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - index"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - index</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="vendor/js/index.f19792375831895581c2.js"></script><script defer="defer" src="vendor/js/share.f19792375831895581c2.js"></script><link href="vendor/css/index.f19792375831895581c2.css" rel="stylesheet"></head><body><div class="nav"><a class="active" href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>INDEX</h1><img class="responsive" src="images/index.jpg"></body></html>