feat - [webpack v5 migration]

.github/workflows/ci.yml

@@ -1,14 +1,14 @@
 name: React Template CI
 on:
   pull_request:
-    branches: [ master ]
+    branches: [master]
 jobs:
   build-and-test:
     name: Build & Test
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x]
+        node-version: [12.x]
     steps:
       - uses: actions/checkout@v1
 

app/app.js

@@ -85,7 +85,7 @@ if (!window.Intl) {
 // it's not most important operation and if main code fails,
 // we do not want it installed
 if (process.env.NODE_ENV === 'production') {
-  require('offline-plugin/runtime').install({
+  require('@lcdp/offline-plugin/runtime').install({
     onUpdated: () => {
       // Reload the webpage to load into the new version
       window.location.reload();

app/containers/HomeContainer/tests/__snapshots__/index.test.js.snap

@@ -22,7 +22,7 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="ant-card HomeContainer__CustomCard-l0s8pp-0 etQjAO ant-card-bordered"
+        class="ant-card ant-card-bordered HomeContainer__CustomCard-l0s8pp-0 etQjAO"
         maxwidth="500"
       >
         <div
@@ -48,44 +48,51 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
             Get details of repositories
           </p>
           <span
-            class="ant-input-search ant-input-affix-wrapper"
+            class="ant-input-group-wrapper ant-input-search"
           >
-            <input
-              class="ant-input"
-              data-testid="search-bar"
-              type="text"
-              value=""
-            />
             <span
-              class="ant-input-suffix"
+              class="ant-input-wrapper ant-input-group"
             >
+              <input
+                class="ant-input"
+                data-testid="search-bar"
+                type="text"
+                value=""
+              />
               <span
-                aria-label="search"
-                class="anticon anticon-search ant-input-search-icon"
-                role="img"
-                tabindex="-1"
+                class="ant-input-group-addon"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <button
+                  class="ant-btn ant-btn-icon-only ant-input-search-button"
+                  type="button"
                 >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
+                  <span
+                    aria-label="search"
+                    class="anticon anticon-search"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="search"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </span>
             </span>
           </span>
         </div>
       </div>
       <div
-        class="ant-card HomeContainer__CustomCard-l0s8pp-0 lglBtv ant-card-bordered"
+        class="ant-card ant-card-bordered HomeContainer__CustomCard-l0s8pp-0 lglBtv"
         color="grey"
       >
         <div

app/index.html

@@ -10,15 +10,13 @@
     <!-- Allow installing the app to the homescreen -->
     <meta name="mobile-web-app-capable" content="yes" />
 
-    <link rel="icon" href="/react-template/favicon.ico" />
     <title>React Template</title>
   </head>
 
   <body>
     <!-- Display a message if JS has been disabled on the browser. -->
     <noscript
-      >If you're seeing this message, that means
-      <strong>JavaScript has been disabled on your browser</strong>, please
+      >If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please
       <strong>enable JS</strong> to make this app work.</noscript
     >
 

babel.config.js

@@ -26,7 +26,7 @@ module.exports = {
         'transform-react-remove-prop-types',
         '@babel/plugin-transform-react-inline-elements',
         '@babel/plugin-transform-react-constant-elements',
-        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'import-antd']
+        ['import', { libraryName: 'antd', /*  libraryDirectory: 'es', */ style: true }, 'import-antd']
       ]
     },
     dev: {

internals/webpack/webpack.base.babel.js → internals/webpack/webpack.config.base.js

@@ -66,7 +66,8 @@ module.exports = options => ({
                 modifyVars: {
                   'primary-color': colors.secondary
                 }
-              }
+              },
+              implementation: require('less')
             }
           }
         ]
@@ -121,7 +122,7 @@ module.exports = options => ({
                 optimizationLevel: 7
               },
               pngquant: {
-                quality: '65-90',
+                quality: [0.65, 0.9],
                 speed: 4
               }
             }

internals/webpack/webpack.dev.babel.js → internals/webpack/webpack.config.dev.babel.js

@@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-module.exports = require('./webpack.base.babel')({
+module.exports = require('./webpack.config.base')({
   mode: 'development',
 
   // Add hot reloading in development
@@ -20,7 +20,6 @@ module.exports = require('./webpack.base.babel')({
 
   // Don't use hashes in dev mode for better performance
   output: {
-    filename: '[name].js',
     chunkFilename: '[name].chunk.js'
   },
 

internals/webpack/webpack.prod.babel.js → internals/webpack/webpack.config.prod.babel.js

@@ -2,14 +2,13 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
-const OfflinePlugin = require('offline-plugin');
-const { HashedModuleIdsPlugin } = require('webpack');
+const OfflinePlugin = require('@lcdp/offline-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 
-module.exports = require('./webpack.base.babel')({
+module.exports = require('./webpack.config.base')({
   mode: 'production',
-
+  target: 'web',
   // In production, we skip all hot-reloading stuff
   entry: [require.resolve('react-app-polyfill/ie11'), path.join(process.cwd(), 'app/app.js')],
 
@@ -35,9 +34,7 @@ module.exports = require('./webpack.base.babel')({
             ascii_only: true
           }
         },
-        parallel: true,
-        cache: true,
-        sourceMap: true
+        parallel: true
       })
     ],
     nodeEnv: 'production',
@@ -73,16 +70,15 @@ module.exports = require('./webpack.base.babel')({
         removeStyleLinkTypeAttributes: true,
         keepClosingSlash: true,
         minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
+        minifyCSS: true
+        // minifyURLs: true
       },
       inject: true
     }),
 
     // Put it in the end to capture all the HtmlWebpackPlugin's
     // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
     new OfflinePlugin({
-      relativePaths: process.env.NODE_ENV === 'production',
       publicPath: '/',
       appShell: '/',
 
@@ -104,7 +100,6 @@ module.exports = require('./webpack.base.babel')({
     }),
 
     new CompressionPlugin({
-      algorithm: 'gzip',
       test: /\.js$|\.css$|\.html$/,
       threshold: 10240,
       minRatio: 0.8
@@ -129,12 +124,6 @@ module.exports = require('./webpack.base.babel')({
           ios: true
         }
       ]
-    }),
-
-    new HashedModuleIdsPlugin({
-      hashFunction: 'sha256',
-      hashDigest: 'hex',
-      hashDigestLength: 20
     })
   ],