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,10 +7,10 @@ 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 ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
 
 const modules = './modules';
 const dirModules = './client/modules';
@@ -46,13 +46,18 @@ 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(),
 ];
 
@@ -68,13 +73,19 @@ module.exports = {
             'node:process': 'process',
             'node:path': 'path',
         },
+        fallback: {
+            "path": require.resolve("path-browserify"),
+            "process": require.resolve("process/browser")
+        }
     },
     devtool,
     optimization: {
         splitChunks,
     },
     entry: {
+        'nojs': './css/nojs.css',
         cloudcmd: `${dir}/cloudcmd.js`,
+        sw: `${dir}/sw/sw.js`,
         [`${modules}/edit`]: `${dirModules}/edit.js`,
         [`${modules}/edit-file`]: `${dirModules}/edit-file.js`,
         [`${modules}/edit-file-vim`]: `${dirModules}/edit-file-vim.js`,

client/css.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('../css/main.css');
-require('../css/nojs.css');
+//require('../css/nojs.css');
 require('../css/columns/name-size-date.css');
 require('../css/columns/name-size.css');
 require('../css/themes/light.css');

client/modules/config/index.js

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

client/modules/view/index.js

@@ -329,12 +329,12 @@ function check(src) {
  * @callback   -  executes, when everything loaded
  */
 async function loadAll() {
-    const {DIR_DIST} = CloudCmd;
+    const {DIR_MODULES} = CloudCmd;
 
     time(`${Name} load`);
 
     Loading = true;
-    await loadCSS(`${DIR_DIST}/view.css`);
+    await loadCSS(`${DIR_MODULES}/view.css`);
     Loading = false;
 }
 

package.json

@@ -52,7 +52,6 @@
     "watch:lint": "madrun watch:lint",
     "fresh:lint": "madrun fresh:lint",
     "lint:fresh": "madrun lint:fresh",
-    "spell": "madrun spell",
     "fix:lint": "madrun fix:lint",
     "lint:stream": "madrun lint:stream",
     "test": "madrun test",
@@ -66,8 +65,6 @@
     "6to5": "madrun 6to5",
     "6to5:client": "madrun 6to5:client",
     "6to5:client:dev": "madrun 6to5:client:dev",
-    "pre6to5:client": "madrun pre6to5:client",
-    "pre6to5:client:dev": "madrun pre6to5:client:dev",
     "watch:client": "madrun watch:client",
     "watch:client:dev": "madrun watch:client:dev",
     "watch:server": "madrun watch:server",
@@ -76,6 +73,7 @@
     "watch:test:server": "madrun watch:test:server",
     "watch:coverage": "madrun watch:coverage",
     "build": "madrun build",
+    "postbuild": "madrun postbuild",
     "build:dev": "madrun build:dev",
     "build:client": "madrun build:client",
     "build:client:dev": "madrun build:client:dev",