feature: webpack 5

.webpack/cp.mjs

@@ -0,0 +1,17 @@
+import {cpSync} from 'node:fs';
+
+cpSync('./css/columns', './dist-dev/columns', {
+    recursive: true,
+});
+
+cpSync('./css/themes', './dist-dev/themes', {
+    recursive: true,
+});
+
+cpSync('./css/columns', './dist/columns', {
+    recursive: true,
+});
+
+cpSync('./css/themes', './dist/themes', {
+    recursive: true,
+});

.webpack/css.js

@@ -1,77 +1,39 @@
 'use strict';
 
-const {env} = require('node:process');
-const fs = require('node:fs');
-const {
-    basename,
-    extname,
-    join,
-} = require('node:path');
+const {env} = require('node:process')
 
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const isDev = env.NODE_ENV === 'development';
 
-const extractCSS = (a) => new ExtractTextPlugin(`${a}.css`);
-const extractMain = extractCSS('[name]');
-
-const cssNames = [
-    'nojs',
-    'view',
-    'config',
-    'terminal',
-    'user-menu',
-    ...getCSSList('columns'),
-    ...getCSSList('themes'),
-];
-
-const cssPlugins = cssNames.map(extractCSS);
 const clean = (a) => a.filter(Boolean);
 
 const plugins = clean([
-    ...cssPlugins,
-    extractMain,
+  new MiniCssExtractPlugin({
+      filename: '[name].css',
+  }),
     !isDev && new OptimizeCssAssetsPlugin(),
 ]);
 
 const rules = [{
-    test: /\.css$/,
-    exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*|themes.*)\.css/,
-    use: extractMain.extract(['css-loader']),
-}, ...cssPlugins.map(extract), {
-    test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
-    use: {
-        loader: 'url-loader',
+    test: /\.css$/i,
+    use: [MiniCssExtractPlugin.loader, {
+        loader: "css-loader",
         options: {
-            limit: 100_000,
+            url: true, 
         },
-    },
-}];
+    }],
+  }, {
+    test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
+    type: 'asset/inline',
+}]
+
 
 module.exports = {
     plugins,
-    module: {
-        rules,
-    },
+  module: {
+      rules,
+  },
 };
 
-function getCSSList(dir) {
-    const base = (a) => basename(a, extname(a));
-    const addDir = (name) => `${dir}/${name}`;
-    const rootDir = join(__dirname, '..');
-    
-    return fs
-        .readdirSync(`${rootDir}/css/${dir}`)
-        .map(base)
-        .map(addDir);
-}
-
-function extract(extractPlugin) {
-    const {filename} = extractPlugin;
-    
-    return {
-        test: RegExp(`css/${filename}`),
-        use: extractPlugin.extract(['css-loader']),
-    };
-}

.webpack/js.js

@@ -7,13 +7,17 @@ const {
 } = require('node:path');
 
 const {env} = require('node:process');
-const {EnvironmentPlugin} = require('webpack');
+const {
+    EnvironmentPlugin,
+    NormalModuleReplacementPlugin,
+} = require('webpack');
 const WebpackBar = require('webpackbar');
 
-const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
-
 const modules = './modules';
 const dirModules = './client/modules';
+const dirCss = './css';
+const dirThemes = `${dirCss}/themes`;
+const dirColumns = `${dirCss}/columns`;
 const dir = './client';
 const {NODE_ENV} = env;
 const isDev = NODE_ENV === 'development';
@@ -46,19 +50,43 @@ const rules = clean([
 ]);
 
 const plugins = [
+    new NormalModuleReplacementPlugin(/^node:/, (resource) => {
+        resource.request = resource.request.replace(/^node:/, '');
+    }),
     new EnvironmentPlugin({
         NODE_ENV,
     }),
-    new ServiceWorkerWebpackPlugin({
-        entry: join(__dirname, '..', 'client', 'sw', 'sw.js'),
-        excludes: ['*'],
-    }),
     new WebpackBar(),
 ];
 
 const splitChunks = {
-    name: 'cloudcmd.common',
     chunks: 'all',
+    cacheGroups: {
+        abcCommon: {
+            name: 'cloudcmd.common',
+            chunks: (chunk) => {
+                const lazyChunks = [
+                    'nojs',
+                    'view',
+                    'edit',
+                    'terminal',
+                    'config',
+                    'user-menu',
+                    'help',
+                    'themes/dark',
+                    'themes/light',
+                    'columns/name-size',
+                    'columns/name-size-date',
+                ];
+
+                return !lazyChunks.includes(chunk.name);
+            },
+            minChunks: 1,
+            enforce: true,
+            priority: -1,
+            reuseExistingChunk: true,
+        },
+    },
 };
 
 module.exports = {
@@ -68,12 +96,27 @@ module.exports = {
             'node:process': 'process',
             'node:path': 'path',
         },
+        fallback: {
+            'path': require.resolve('path-browserify'),
+            'process': require.resolve('process/browser'),
+        },
     },
     devtool,
     optimization: {
         splitChunks,
     },
     entry: {
+        'themes/dark': `${dirThemes}/dark.css`,
+        'themes/light': `${dirThemes}/light.css`,
+        'columns/name-size': `${dirColumns}/name-size.css`,
+        'columns/name-size-date': `${dirColumns}/name-size-date.css`,
+        'nojs': `${dirCss}/nojs.css`,
+        help: `${dirCss}/help.css`,
+        view: `${dirCss}/view.css`,
+        config: `${dirCss}/config.css`,
+        terminal: `${dirCss}/terminal.css`,
+        'user-menu': `${dirCss}/user-menu.css`,
+        sw: `${dir}/sw/sw.js`,
         cloudcmd: `${dir}/cloudcmd.js`,
         [`${modules}/edit`]: `${dirModules}/edit.js`,
         [`${modules}/edit-file`]: `${dirModules}/edit-file.js`,