feature: webpack 5

Author: coderaiser

.madrun.mjs

@@ -16,6 +16,7 @@ const is20 = process.version.startsWith('v2');
 // https://stackoverflow.com/a/69746937/4536327
 const buildEnv = (is17 || is20) && {
     NODE_OPTIONS: '--openssl-legacy-provider',
+    NODE_ENV: 'production',
 };
 
 export default {
@@ -56,6 +57,7 @@ export default {
     'watch:test:server': async () => `nodemon -w client -w test/client -x ${await run('test:server')}`,
     'watch:coverage': async () => [testEnv, `nodemon -w server -w test -w common -x ${await cutEnv('coverage')}`],
     'build': async () => run('6to5:*'),
+    'postbuild': () => 'node .webpack/cp.mjs',
     'build:dev': async () => run('build:client:dev'),
     'build:client': () => run('6to5:client'),
     'build:client:dev': () => run('6to5:client:dev'),

.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`,

client/client.js

@@ -138,17 +138,10 @@ function CloudCmdProto(DOM) {
 
         await initModules();
         await baseInit();
-        await loadStyle();
 
         CloudCmd.route(location.hash);
     };
 
-    async function loadStyle() {
-        const {prefix} = CloudCmd;
-        const name = `${prefix}/dist/cloudcmd.common.css`;
-        
-        await load.css(name);
-    }
 
     this.route = (path) => {
         const query = path.split('/');

client/cloudcmd.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const process = require('node:process');
-require('./css');
+require('../css/main.css');
 
 const wraptile = require('wraptile');
 const load = require('load.js');

client/css.js

@@ -52,12 +52,12 @@ module.exports.init = async () => {
 
     showLoad();
 
-    const {prefix} = CloudCmd;
+    const {DIR_DIST} = CloudCmd;
 
     [Template] = await Promise.all([
         Files.get('config-tmpl'),
         loadSocket(),
-        loadCSS(`${prefix}/dist/config.css`),
+        loadCSS(`${DIR_DIST}/config.css`),
         CloudCmd.View(),
     ]);
 

client/modules/config/index.js

@@ -1,5 +1,5 @@
-@import url(./urls.css);
 @import url(./reset.css);
+@import url(./urls.css);
 @import url(./style.css);
 @import url(./icons.css);
 @import url(./help.css);

css/main.css

@@ -8,7 +8,7 @@
         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
         <link rel="icon" href="{{ prefix }}/favicon.ico">
 
-        <link rel=stylesheet href="{{ prefix }}/dist/cloudcmd.css">
+        <link rel=stylesheet href="{{ prefix }}/dist/cloudcmd.common.css">
         <link rel="manifest" href="{{ prefix }}/public/manifest.json">
         <noscript>
             <link rel=stylesheet href="{{ prefix }}/dist/nojs.css">