feat: update packages

Author: Turbo Thinh

.eslintrc.yml

@@ -17,7 +17,7 @@ rules:
     - devDependencies: true
 
   react/destructuring-assignment:
-    - never
+    - off
 
 env:
   es6: true # enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6).

README.md

@@ -3,26 +3,27 @@
 A simple React boilerplate that allow you to understand easily, embrace good practices and workflow, optimizing for production and does not do any magic.
 
 ### Features
-1. SEO optimized
+- [x] Hot-loader
+- [x] Absolute import (like `Assets/images/img.png` instead of `../../assets/images/img.png`)
+- [x] Style with `SASS` / `SCSS`
+- [x] Bundle optimization:
+  * `CSS` bundle with option to easily hash className with CSS module
+  * Minify `CSS`, `JS`
+  * Automaticaly create `Analyzer` file after build
+  * Create `/compressed` folder for extra optimization (use optionally)
+  * Add Image optimization
+  * Split build to chunks for caching and fast loading
+  * Lazy-loading enabled
+- [x] SEO optimized
   * robots.txt
   * Auto generate sitemap
   * `meta` tags added allow easy configuration
   * Social media sharing optimized
-2. Easy development experience with hot-loader
-3. Add `Polyfill` automatically to browser (This is redundant since Babel 7)
-4. Automatically resolve stastic path (like `Assets/images/img.png` instead of `../../assets/images/img.png`)
-5. `SASS` / `SCSS` compiler (easy to customize predecesor of your own with `LESS`, `Stylus`... using the same format)
-6. `CSS` bundle with option to easily hash className with CSS module
-7. Minify `CSS`, `JS`
-8. Automaticaly create `Analyzer` file after build
-9. Create `/compressed` folder for extra optimization (use optionally)
-10. Add Image optimization
-11. Split build to chunks for caching and fast loading
-12. Lazy-loading enabled
+- [x] Netlify config for easy deployment
 
 ### Get started
 - To run the app: `yarn start`
-- To build the app: `yarn build`
+- To build the app: `yarn build`.
 
 ### License
 MIT license

package.json

@@ -9,50 +9,52 @@
     "lint": "eslint .",
     "lint fix": "eslint . --fix",
     "build": "webpack --mode production --config webpack/prod.config.js",
-    "start": "webpack-dev-server --mode development --config webpack/dev.config.js --open --hot"
+    "build:start": "npx serve dist",
+    "start": "webpack serve --mode development --config webpack/dev.config.js --open --hot"
+  },
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.0.2",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-import-inspector": "^2.0.0",
-    "compression-webpack-plugin": "^1.1.12",
-    "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^0.28.11",
-    "eslint": "^5.5.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-import-resolver-webpack": "^0.10.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^4.3.1",
-    "imagemin-mozjpeg": "^7.0.0",
-    "imagemin-webpack-plugin": "^2.2.0",
-    "mini-css-extract-plugin": "^0.4.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^4.0.1",
-    "prop-types": "^15.6.2",
-    "react-helmet": "^5.2.0",
-    "react-lazyload": "^2.3.0",
-    "react-router-dom": "^4.3.1",
-    "sass-loader": "^7.0.1",
-    "svg-url-loader": "^2.3.2",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.8.3",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^2.1.3",
-    "webpack-dev-server": "^3.1.4",
-    "webpack-merge": "^4.1.4"
-  },
-  "dependencies": {
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^7.1.1",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.0",
+    "image-webpack-loader": "^7.0.1",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-webpack-plugin": "^2.4.2",
+    "mini-css-extract-plugin": "^1.3.3",
+    "node-sass": "^5.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "prop-types": "^15.7.2",
+    "react-helmet": "^6.1.0",
+    "react-lazyload": "^3.1.0",
+    "react-router-dom": "^5.2.0",
+    "sass-loader": "^10.1.0",
+    "svg-url-loader": "^7.1.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.11.1",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.1",
+    "webpack-merge": "^5.7.3"
   },
   "engines": {
     "node": ">=10.0.0"

src/components/Gallery/Gallery.js

@@ -13,14 +13,14 @@ const Gallery = () => (
   <div>
     <div key="31341" className={classes([appStyles.box, appStyles.mt30])}>
       <span className={appStyles.mt30}>
-          * Images are credited to Unplash and Pixabay
+        * Images are credited to Unplash and Pixabay
         <br />
-          This section is made to test copy + display images in different formats
+        This section is made to test copy + display images in different formats
       </span>
 
       <div className={classes([styles.masonryColumns, appStyles.mt30])}>
 
-        { photos.map(obj => (
+        { photos.map((obj) => (
           <LazyLoad offset={100} height={100} key={generateKey()}>
             <div className={styles.masonryItem} key={generateKey()}>
               <img className={styles.masonryImg} key={generateKey()} alt={obj} src={obj} />

src/components/Header/Header.js

@@ -7,7 +7,7 @@ import icon from 'Assets/images/react-icon.png';
 import { classes } from 'Includes/ultilities';
 import styles from './Header.sass';
 
-const Header = props => (
+const Header = (props) => (
   <div className={styles.nav}>
     <div className={classes([layout.box, styles.navInner])}>
 

src/components/Loading/Loading.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Loading = () => (
   <div>
-      Component is loading
+    Component is loading
   </div>
 );
 

src/routes/routes.js

@@ -4,7 +4,6 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import favicon from 'Assets/images/favicon.png';
 
-
 import Home from 'Containers/Home/Home';
 import Login from 'Containers/Login/Login';
 import NotFound404 from 'Containers/404/404';

webpack/base.config.js

@@ -1,16 +1,14 @@
 const path = require('path');
 
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
 const imageminMozjpeg = require('imagemin-mozjpeg');
 
 module.exports = {
   entry: {
-    main: [
-      // '@babel/polyfill',
-      './src/index.js'],
+    main: ['./src/index.js'],
   },
   resolve: {
     alias: {
@@ -51,8 +49,8 @@ module.exports = {
         use: {
           loader: 'url-loader',
           options: {
-            // Images larger than 25 KB won’t be inlined
-            limit: 100 * 1024,
+            limit: 100 * 1024, // Images larger than 25 KB won’t be inlined
+            esModule: false,
           },
         },
       },
@@ -72,19 +70,23 @@ module.exports = {
     ],
   },
   plugins: [
+    // Clean bundle
+    new CleanWebpackPlugin(),
 
     // Initiate html template
     new HtmlWebpackPlugin({
       template: './src/index.html',
     }),
 
     // Copy all assets to dist folder
-    new CopyWebpackPlugin([
-      { from: 'src/assets/images', to: 'assets/images' },
-      { from: 'src/assets/photos', to: 'assets/photos' },
-      { from: 'src/config/sitemap.xml', to: 'sitemap.xml' },
-      { from: 'src/config/robots.txt', to: 'robots.txt' },
-    ]),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: 'src/assets/images', to: 'assets/images' },
+        { from: 'src/assets/photos', to: 'assets/photos' },
+        { from: 'src/config/sitemap.xml', to: 'sitemap.xml' },
+        { from: 'src/config/robots.txt', to: 'robots.txt' },
+      ],
+    }),
 
     // Optimmize images
     new ImageminPlugin({

webpack/dev.config.js

@@ -1,8 +1,7 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const baseConfig = require('./base.config.js');
 
-
 // TODO: Add Lazy Loading, Optimize code splitting, Split chunks
 
 module.exports = merge(baseConfig, {
@@ -19,9 +18,10 @@ module.exports = merge(baseConfig, {
           {
             loader: 'css-loader',
             options: {
-              // If enable CSS Modular, hence hashing classNames
-              modules: true,
-              localIdentName: '[local]',
+              modules: {
+                localIdentName: '[name]__[local]',
+              },
+              sourceMap: false,
             },
           },
           {

webpack/prod.config.js

@@ -1,14 +1,12 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const path = require('path');
-
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // eslint-disable-line
 const CompressionPlugin = require('compression-webpack-plugin');
 const baseConfig = require('./base.config.js');
 
-
 module.exports = merge(baseConfig, {
 
   // Define Build output
@@ -28,12 +26,10 @@ module.exports = merge(baseConfig, {
           {
             loader: 'css-loader',
             options: {
-              // If disable CSS Modular
-              // modules: false,
-
-              // If enable CSS Modular, hence hashing classNames
-              modules: true,
-              localIdentName: '[hash:base64:6]',
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
             },
           },
           {
@@ -62,9 +58,9 @@ module.exports = merge(baseConfig, {
 
     // Compress
     new CompressionPlugin({
-      asset: 'compressed/[path].gz[query]',
-      algorithm: 'gzip',
       test: /\.js$|\.css$|\.html$/,
+      deleteOriginalAssets: false,
+      algorithm: 'gzip',
       threshold: 10240,
       minRatio: 0.8,
     }),