Merge pull request #36 from tomik23/update

Update devDependencies

.eslintrc.js

@@ -7,16 +7,7 @@ module.exports = {
   extends: ['eslint:recommended'],
   plugins: ['prettier'],
   rules: {
-    'prettier/prettier': [
-      'warn',
-      {
-        semi: true,
-        singleQuote: true,
-        tabWidth: 2,
-        endOfLine: 'auto',
-        printWidth: 80,
-      },
-    ],
+    'prettier/prettier': 'error',
     'comma-dangle': ['error', 'only-multiline'],
     'linebreak-style': ['error', 'windows'],
     'no-param-reassign': [2, { props: false }],

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "printWidth": 80
+}

README.md

@@ -1,12 +1,21 @@
 # Webpack Boilerplate - multiple entry
 
-![npm](https://img.shields.io/npm/v/webpack?label=webpack&style=flat-square&logo=webpack)
-![npm](https://img.shields.io/npm/v/webpack-cli?label=webpack-cli&style=flat-square&logo=webpack)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+![npm](https://img.shields.io/npm/v/webpack?label=webpack&style=for-the-badge&logo=webpack)
+![npm](https://img.shields.io/npm/v/webpack-cli?label=webpack-cli&style=for-the-badge&logo=webpack)
 
 Minimal Webpack 5 boilerplate with Babel, core-js, Sass, Pug, ESlint and a lot mor. It also includes optimization for development and production build.
 A version with [webpack 4](https://github.com/tomik23/webpack-boilerplate/tree/webpack-4) is also available.
 
+## 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`
+- [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`
+
 ## Clone the repo and install dependencies
 
 ```bash
@@ -29,16 +38,6 @@ npm run dev
 npm run prod
 ```
 
-## Features
-
-- [Webpack](https://webpack.js.org/)
-- [Babel](https://babeljs.io/)
-- [Core-js](https://github.com/zloirock/core-js/)
-- [Pug](https://github.com/pugjs/)
-- [Sass](https://sass-lang.com/)
-- [PostCSS](https://postcss.org/)
-- [ESLint](https://eslint.org/)
-
 ## Dependencies
 
 ### Webpack

config/webpack.common.js

@@ -5,7 +5,7 @@ const HtmlWebPackPlugin = require('html-webpack-plugin');
 const config = [
   { site: 'index', share: 'share' },
   { site: 'about', share: 'share' },
-  { site: 'contact' }
+  { site: 'contact' },
 ];
 
 // configure Babel Loader
@@ -16,8 +16,8 @@ const configureBabelLoader = () => {
     use: {
       loader: 'babel-loader',
     },
-  }
-}
+  };
+};
 
 // configure Pug Loader
 const configurePugLoader = () => {
@@ -28,8 +28,8 @@ const configurePugLoader = () => {
       pretty: true,
       self: true,
     },
-  }
-}
+  };
+};
 
 // configure HtmlWebPackPlugin
 const entryHtmlPlugins = config.map(({ site, share }) => {
@@ -45,40 +45,38 @@ const entryHtmlPlugins = config.map(({ site, share }) => {
     // injecting js and css files into
     // html as well as common share.js file
     chunks: [site, share],
-  })
-})
+  });
+});
 
 // configure Output
 const configureOutput = () => {
   return {
     path: path.resolve(__dirname, '../docs'),
     filename: 'vendor/js/[name].[fullhash].js',
     // assetModuleFilename: 'images/static/[name].[hash][ext]',
-    publicPath: './',
-  }
-}
+  };
+};
 
 module.exports = {
   // input files
   entry: {
     index: {
       import: './sources/js/index.js',
-      dependOn: 'share'
+      dependOn: 'share',
     },
     about: {
       import: './sources/js/about.js',
-      dependOn: 'share'
+      dependOn: 'share',
     },
     contact: {
-      import: './sources/js/contact.js'
+      import: './sources/js/contact.js',
     },
-    share: './sources/js/module/share.js'
+    share: './sources/js/module/share.js',
   },
   // configuration of output files
   output: configureOutput(),
   module: {
     rules: [
-
       // Images, fonts, e.t.c: Copy files to build folder
       // https://webpack.js.org/guides/asset-modules/#resource-assets
       {
@@ -109,7 +107,7 @@ module.exports = {
       //     filename: 'images/static/[name].[hash][ext]',
       //   },
 
-      //   // depending on the size of the file, 
+      //   // depending on the size of the file,
       //   // if the file is too small, the file is inline,
       //   // if the larger niche size, the file is only copied
       //   parser: {
@@ -131,10 +129,8 @@ module.exports = {
       },
 
       configureBabelLoader(),
-      configurePugLoader()
+      configurePugLoader(),
     ],
   },
-  plugins: [
-    ...entryHtmlPlugins
-  ]
-};
+  plugins: [...entryHtmlPlugins],
+};

config/webpack.dev.js

@@ -9,15 +9,14 @@ const { cssLoaders } = require('./util');
 // Configure Dev Server
 const configureDevServer = () => {
   return {
-    contentBase: path.resolve(__dirname, '../sources'),
+    static: {
+      directory: path.resolve(__dirname, '../sources'),
+      publicPath: '/',
+    },
     open: true,
     port: 3000,
     liveReload: true,
     hot: true,
-    publicPath: '/',
-    stats: 'errors-only',
-    inline: true,
-    watchContentBase: true,
   };
 };
 
@@ -37,22 +36,18 @@ module.exports = merge(baseConfig, {
     rules: [
       {
         test: /\.(css|sass|scss)$/,
-        use: [
-          'style-loader',
-          ...cssLoaders
-        ],
+        use: ['style-loader', ...cssLoaders],
       },
     ],
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-
+    // new webpack.HotModuleReplacementPlugin(),
     // we create a global variable that
     // we use in pug and we can use in js
     // https://webpack.js.org/plugins/define-plugin/
     // In pug - var DATA = self.htmlWebpackPlugin.options.DATA
     new webpack.DefinePlugin({
-      PRODUCTION: JSON.stringify(false)
+      PRODUCTION: JSON.stringify(false),
     }),
-  ]
-});
+  ],
+});

config/webpack.prod.js

@@ -13,51 +13,67 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 // common part for production and dev
 const { cssLoaders } = require('./util');
 
+// If you want you can enable
+// generating only one css file
+const oneFileCss = {
+  splitChunks: {
+    cacheGroups: {
+      styles: {
+        name: 'styles',
+        type: 'css/mini-extract',
+        chunks: 'all',
+        enforce: true,
+      },
+    },
+  },
+};
+
 // configure Optimization
 const configureOptimization = () => {
   return {
     minimize: true,
-    minimizer: [new TerserPlugin()]
-  }
-}
+    minimizer: [new TerserPlugin()],
+    // ...oneFileCss,
+  };
+};
 
 // configure MiniCssExtract
 const configureMiniCssExtract = () => {
   return {
     filename: 'vendor/css/[name].[fullhash].css',
     chunkFilename: 'vendor/css/[name].[fullhash].css',
-  }
-}
+  };
+};
 
 // configure Service Worker
 const configureSW = () => {
   return {
     clientsClaim: true,
     skipWaiting: true,
     directoryIndex: 'index.html',
-    offlineGoogleAnalytics: true
-  }
-}
+    offlineGoogleAnalytics: true,
+  };
+};
 
 // configure Copy
 const configureCopy = () => {
   return {
     patterns: [
       {
         from: 'sources/assets/',
-        to: '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']
-        }
+          ignore: ['**.svg'],
+        },
       },
-    ]
-  }
+    ],
+  };
 };
 
 module.exports = merge(baseConfig, {
@@ -77,48 +93,42 @@ module.exports = merge(baseConfig, {
               publicPath: '../../',
             },
           },
-          ...cssLoaders
+          ...cssLoaders,
         ],
       },
     ],
   },
   optimization: configureOptimization(),
   plugins: [
-    // when we run the production build then 
+    // when we run the production build then
     // the docs folder is cleared
     new CleanWebpackPlugin({
       dry: false,
-      verbose: true
+      verbose: true,
     }),
 
     // we extract scss files from js and create
     // separate files for individual pages
-    new MiniCssExtractPlugin(
-      configureMiniCssExtract()
-    ),
+    new MiniCssExtractPlugin(configureMiniCssExtract()),
 
     // 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
     // https://webpack.js.org/plugins/define-plugin/
     // In pug - var DATA = self.htmlWebpackPlugin.options.DATA
     new webpack.DefinePlugin({
-      PRODUCTION: JSON.stringify(true)
+      PRODUCTION: JSON.stringify(true),
     }),
 
     // Visualization of the size of js files
     new BundleAnalyzerPlugin({
-      openAnalyzer: true
+      openAnalyzer: true,
     }),
-  ]
-});
+  ],
+});

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.4164d7dc74749f6886d9.js"></script><script defer="defer" src="./vendor/js/share.4164d7dc74749f6886d9.js"></script><link href="./vendor/css/about.4164d7dc74749f6886d9.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.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>

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.4164d7dc74749f6886d9.js"></script><link href="./vendor/css/contact.4164d7dc74749f6886d9.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.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>

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.4164d7dc74749f6886d9.js"></script><script defer="defer" src="./vendor/js/share.4164d7dc74749f6886d9.js"></script><link href="./vendor/css/index.4164d7dc74749f6886d9.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.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>