Migrate to webpack 5

package.json

@@ -20,64 +20,62 @@
   "author": "",
   "license": "GPL-3.0-only",
   "dependencies": {
-    "@types/crypto-js": "^4.1.1",
+    "webpack-dev-server": "^4.7.4"
-    "crypto-js": "^4.1.1",
-    "webpack-dev-server": "^3.11.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
+    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.14.2",
+    "@babel/core": "^7.17.8",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/plugin-transform-typescript": "^7.16.8",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-env": "^7.16.11",
     "@babel/preset-es2015": "^7.0.0-beta.53",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/preset-typescript": "^7.16.7",
     "@cryptography/aes": "^0.1.1",
     "@cryptography/sha1": "^0.2.0",
     "@cryptography/sha256": "^0.2.0",
-    "@peculiar/webcrypto": "^1.1.7",
+    "@peculiar/webcrypto": "^1.3.2",
     "@types/big-integer": "^0.0.31",
-    "@types/chrome": "0.0.139",
+    "@types/chrome": "0.0.180",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.4.1",
-    "@types/serviceworker-webpack-plugin": "^1.0.2",
+    "@types/serviceworker-webpack-plugin": "^1.0.3",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.4",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.4",
     "babel-preset-es2015": "^6.24.1",
     "big-integer": "^1.6.51",
     "compression": "^1.7.4",
-    "css-loader": "^3.6.0",
+    "css-loader": "^6.7.1",
-    "dotenv-webpack": "^7.0.3",
+    "cssnano": "^5.1.5",
-    "express": "^4.17.1",
+    "dotenv-webpack": "^7.1.0",
-    "fast-png": "^5.0.4",
+    "express": "^4.17.3",
+    "fast-png": "^6.1.0",
     "handlebars": "^4.7.7",
     "handlebars-loader": "^1.7.1",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
-    "ifdef-loader": "^2.3.0",
+    "ifdef-loader": "^2.3.2",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
-    "media-query-plugin": "^1.4.0",
+    "media-query-plugin": "^1.5.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.6.0",
-    "npm": "^7.12.1",
+    "npm": "^8.5.5",
-    "on-build-webpack": "^0.1.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "pako": "^2.0.4",
-    "pako": "^2.0.3",
+    "postcss-import": "^14.1.0",
-    "postcss": "^8.2.10",
+    "postcss-loader": "^6.2.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^7.4.3",
-    "postcss-preset-env": "^6.7.0",
+    "qr-code-styling": "^1.5.0",
-    "qr-code-styling": "^1.3.4",
+    "sass": "^1.49.9",
-    "sass": "^1.32.13",
+    "sass-loader": "^12.6.0",
-    "sass-loader": "^8.0.2",
+    "style-loader": "^3.3.1",
-    "serviceworker-webpack-plugin": "^1.0.1",
-    "style-loader": "^1.3.0",
     "text-encoding": "^0.7.0",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.1.4",
-    "ts-loader": "^8.2.0",
+    "ts-loader": "^9.2.8",
-    "typescript": "^4.4.3",
+    "typescript": "^4.6.3",
-    "webpack": "^4.46.0",
+    "webpack": "^5.70.0",
-    "webpack-cli": "^3.3.12",
+    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-merge": "^4.2.2",
+    "webpack-cli": "^4.9.2",
-    "webpack-retry-chunk-load-plugin": "^1.5.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-retry-chunk-load-plugin": "^3.0.0",
     "worker-loader": "^3.0.8"
   }
 }

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  parser: 'sugarss',
+  // parser: 'sugarss',
   plugins: {
     'postcss-import': {},
     'postcss-preset-env': {},

src/lib/rlottie/queryableWorker.ts

@@ -62,7 +62,7 @@ export default class QueryableWorker extends EventListenerBase<{
       this.worker.postMessage({
         queryMethod: queryMethod,
         queryMethodArguments: args
-      }, transfer as PostMessageOptions);
+      }, transfer as Transferable[]);
     }
   }
 }

src/scss/partials/_chat.scss

@@ -4,12 +4,14 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
+@use "sass:math";
+
 $btn-send-margin: .5rem;
 $chat-helper-size: 45px;
 $chat-input-box-shadow: 0px 1px 8px 1px rgb(0 0 0 / 18%);
 
 $input-transition-time: .2s;
-$input-half-transition-time: #{$input-transition-time / 2};
+$input-half-transition-time: math.div($input-transition-time, 2);
 $background-transition-time: 0.05s;
 $background-transition-total-time: #{$input-transition-time - $background-transition-time};
 

src/scss/partials/_chatBubble.scss

@@ -4,6 +4,8 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
+@use "sass:math";
+
 $bubble-margin: .25rem;
 $bubble-beside-button-width: 38px;
 
@@ -103,8 +105,8 @@ $bubble-beside-button-width: 38px;
       left: -50%;
       /* top: 0;
       bottom: 0; */
-      top: -#{$bubble-margin / 2};
+      top: -#{math.div($bubble-margin, 2)};
-      bottom: -#{$bubble-margin / 2};
+      bottom: -#{math.div($bubble-margin, 2)};
       content: " ";
       z-index: -1;
     }
@@ -112,13 +114,13 @@ $bubble-beside-button-width: 38px;
 
   /* &.is-highlighted, &.is-selected {
     &:not(.is-group-last):after {
-      height: calc(100% + #{$bubble-margin / 2}) !important;
+      height: calc(100% + #{math.div($bubble-margin, 2)}) !important;
     }
 
     & + &:not(.is-group-last) {
       &:after {
         top: .125rem !important;
-        height: calc(100% - #{$bubble-margin / 2}) !important;
+        height: calc(100% - #{math.div($bubble-margin, 2)}) !important;
       }
     }
   } */
@@ -126,7 +128,7 @@ $bubble-beside-button-width: 38px;
   // ! if turn this on, there will be an empty space
   /* &.is-highlighted, &.is-selected {
     &.is-group-last:after {
-      bottom: #{$bubble-margin / 2} !important;
+      bottom: #{math.div($bubble-margin, 2)} !important;
     }
   } */
 
@@ -162,7 +164,7 @@ $bubble-beside-button-width: 38px;
 
     &.is-highlighted, &.is-selected {
       &:after {
-        top: calc(#{$bubble-margin / 2} + 30px);
+        top: calc(#{math.div($bubble-margin, 2)} + 30px);
       }
     }
   }
@@ -1547,7 +1549,7 @@ $bubble-beside-button-width: 38px;
 
       &:first-of-type {
         .document-selection {
-          top: -#{$bubble-margin / 2}; // * padding inner + half padding outer
+          top: -#{math.div($bubble-margin, 2)}; // * padding inner + half padding outer
         }
 
         .document-wrapper {
@@ -1559,7 +1561,7 @@ $bubble-beside-button-width: 38px;
 
       &:last-of-type {
         .document-selection {
-          bottom: -#{$bubble-margin / 2};
+          bottom: -#{math.div($bubble-margin, 2)};
         }
 
         .document-wrapper {

src/scss/partials/_peerTyping.scss

@@ -4,6 +4,8 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
+@use "sass:math";
+
 .peer-typing {
   //display: flex;
   margin-right: 4px;
@@ -135,7 +137,7 @@
 }
 
 $scale-max: 1;
-$scale-step: 1 / 6;
+$scale-step: math.div(1, 6);
 $scale-mid: $scale-max - $scale-step;
 $scale-min: $scale-max - ($scale-step * 2);
 $opacity-max: 1;

webpack.common.js

@@ -3,10 +3,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MediaQueryPlugin = require('media-query-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const postcssPresetEnv = require('postcss-preset-env');
-const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
 const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
 const fs = require('fs');
 const Dotenv = require('dotenv-webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const allowedIPs = ['127.0.0.1'];
 const devMode = process.env.NODE_ENV !== 'production';
@@ -51,16 +51,22 @@ module.exports = {
               reloadAll: true,
             }
           }, */
-          'css-loader?url=false',
+          {
+            loader: 'css-loader',
+            options: {
+              url: false
+            }
+          },
           devMode ? undefined : MediaQueryPlugin.loader,
           {
             loader: 'postcss-loader',
             options: {
-              ident: 'postcss',
+              postcssOptions: {
                 plugins: [
                   postcssPresetEnv(),
                 ]
               }
+            }
           },
           {
             loader: 'sass-loader',
@@ -92,7 +98,10 @@ module.exports = {
     extensions: ['.ts', '.js'],
   },
 
-  entry: './src/index.ts',
+  entry: {
+    index: './src/index.ts',
+    sw: {import: './src/lib/serviceWorker/index.service.ts', filename: 'sw.js'}
+  },
   /* entry: {
     index: './src/index.ts',
     pluralPolyfill: './src/lib/pluralPolyfill.ts'
@@ -103,12 +112,28 @@ module.exports = {
     globalObject: 'this',
     path: path.resolve(__dirname, 'public'),
     filename: '[name].[chunkhash].bundle.js',
-    chunkFilename: '[name].[chunkhash].chunk.js'
+    chunkFilename: '[name].[chunkhash].chunk.js',
+    clean: {
+      keep(asset) {
+        if(asset.includes('.xml') 
+          || asset.includes('version')
+          || asset.includes('assets/')
+          || asset.includes('changelogs/')
+          || asset.includes('.webmanifest') 
+          || asset.includes('.wasm')
+          || asset.includes('rlottie-wasm')
+          || asset.includes('Worker.min.js')
+          || asset.includes('recorder.min.js')
+          || asset.includes('.hbs')) return true;
+        return false;
+      }
+    }
   },
 
   devServer: {
-    contentBase: path.join(__dirname, 'public'),
+    // static: {
-    watchContentBase: true,
+      // directory: path.join(__dirname, 'public')
+    // },
     compress: true,
     http2: useLocalNotLocal ? true : (useLocal ? undefined : true),
     https: useLocal ? undefined : {
@@ -119,12 +144,14 @@ module.exports = {
       domain
     ],
     host: useLocalNotLocal ? localIp : (useLocal ? undefined : '0.0.0.0'),
-    public: useLocal ? undefined : domain,
     //host: domain, // '0.0.0.0'
     port: useLocal ? undefined : 443,
+    client: {
       overlay: true,
-    before: useLocal ? undefined : function(app, server, compiler) {
+      progress: true
-      app.use((req, res, next) => {
+    },
+    setupMiddlewares: useLocal ? undefined : (middlewares, devServer) => {
+      middlewares.push((req, res) => {
         let IP = '';
         if(req.headers['cf-connecting-ip']) {
           IP = req.headers['cf-connecting-ip'];
@@ -143,33 +170,16 @@ module.exports = {
           next();
         }
       });
+
+      return middlewares;
     },
-    sockHost: useLocal ? undefined : domain,
+    /* public: useLocal ? undefined : domain,
+    sockHost: useLocal ? undefined : domain, */
   },
 
   plugins: [
     new Dotenv(),
     
-    new ServiceWorkerWebpackPlugin({
-      entry: path.join(__dirname, 'src/lib/serviceWorker/index.service.ts'),
-      filename: 'sw.js',
-      //excludes: ['**/*'],
-      includes: [
-        '**/*.js', 
-        '**/*.css', 
-        '**/*.json', 
-        '**/*.wasm', 
-        '**/*.mp3', 
-        '**/*.svg', 
-        '**/*.tgs', 
-        '**/*.ico', 
-        '**/*.woff', 
-        '**/*.woff2', 
-        '**/*.ttf', 
-        '**/*.webmanifest'
-      ],
-    }),
-
     new HtmlWebpackPlugin({
       filename: `index.html`,
       //template: 'public/index_template.html',
@@ -225,5 +235,11 @@ module.exports = {
       // if not set - nothing will happen and error will be returned to the chunk loader.
       //lastResortScript: "window.location.href='/500.html';",
     }),
-  ],
+
+    devMode ? undefined : new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: true,
+      generateStatsFile: true
+    }),
+  ].filter(Boolean),
 };

webpack.dev.js

@@ -1,7 +1,7 @@
 process.env.NODE_ENV = 'development';
 
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 

webpack.prod.js

@@ -1,16 +1,11 @@
 process.env.NODE_ENV = 'production';
 
-const path = require('path');
+const {merge} = require('webpack-merge');
-const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 //const CompressionPlugin = require("compression-webpack-plugin");
-const WebpackOnBuildPlugin = require('on-build-webpack');
 //const TerserJSPlugin = require('terser-webpack-plugin');
 //const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const fs = require('fs');
-
-const buildDir = __dirname + '/public/';
 
 module.exports = merge(common, {
   mode: 'production',
@@ -57,37 +52,5 @@ module.exports = merge(common, {
       minRatio: 0.8,
       deleteOriginalAssets: false,
     }), */
-
-    new WebpackOnBuildPlugin(function(stats) {
-      const newlyCreatedAssets = stats.compilation.assets;
-
-      const unlinked = [];
-      fs.readdir(path.resolve(buildDir), (err, files) => {
-        files.forEach(file => {
-          //console.log('to unlink 1:', file);
-
-          if(file.includes('.xml') 
-            || file.includes('.webmanifest') 
-            || file.includes('.wasm')
-            || file.includes('rlottie-wasm')
-            || file.includes('Worker.min.js')
-            || file.includes('recorder.min.js')
-            || file.includes('.hbs')) return;
-
-          let p = path.resolve(buildDir + file);
-          if(!newlyCreatedAssets[file] && ['.gz', '.js', '.ts', '.map', '.css', '.txt'].find(ext => file.endsWith(ext)) !== undefined) {
-
-            //console.log('to unlink 2:', file);
-            
-            fs.unlinkSync(p);
-            unlinked.push(file);
-          }
-        });
-
-        if(unlinked.length > 0) {
-          console.log('Removed old assets: ', unlinked);
-        }
-      });
-    })
   ]
 });