feature: webpack v5

.madrun.mjs

@@ -45,7 +45,9 @@ export default {
     'coverage:report': () => 'c8 report --reporter=lcov',
     'report': () => 'c8 report --reporter=lcov',
     '6to5': () => [buildEnv, 'webpack --progress'],
-    '6to5:client': () => run('6to5', '--mode production'),
+    '6to5:client': () => run('6to5', '--mode production', {
+        NODE_ENV: 'production',
+    }),
     '6to5:client:dev': async () => await run('6to5', '--mode development', {
         NODE_ENV: 'development',
     }),

.webpack/css.js

@@ -1,4 +1,4 @@
-'use strict';
+'se strict';
 
 const fs = require('fs');
 const {
@@ -7,15 +7,12 @@ const {
     join,
 } = require('path');
 
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const {env} = require('process');
+const {env} = process;
 const isDev = env.NODE_ENV === 'development';
 
-const extractCSS = (a) => new ExtractTextPlugin(`${a}.css`);
-const extractMain = extractCSS('[name]');
-
 const cssNames = [
     'nojs',
     'view',
@@ -25,52 +22,56 @@ const cssNames = [
     ...getCSSList('columns'),
 ];
 
-const cssPlugins = cssNames.map(extractCSS);
-const clean = (a) => a.filter(Boolean);
-
-const plugins = clean([
-    ...cssPlugins,
-    extractMain,
-    !isDev && new OptimizeCssAssetsPlugin(),
-]);
+const plugins = [
+    new MiniCssExtractPlugin({
+        chunkFilename: '[name].css',
+    }),
+    new CssMinimizerPlugin(),
+];
 
 const rules = [{
     test: /\.css$/,
-    exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/,
-    use: extractMain.extract(['css-loader']),
-}, ...cssPlugins.map(extract), {
+    use: [MiniCssExtractPlugin.loader, "css-loader"],
+}, /*{
     test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
     use: {
         loader: 'url-loader',
         options: {
             limit: 100_000,
         },
     },
-}];
+}*/];
 
 module.exports = {
     plugins,
     module: {
         rules,
     },
+    optimization: {
+        splitChunks: {
+          cacheGroups: {
+            cloudcmdCommon: {
+              type: "css/mini-extract",
+              name: "cloudcmd.common",
+              chunks: (chunk) => {
+                  //return !/css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/.test(name)
+                  console.log(chunk);
+                return !chunk.name.includes('modules');
+              },
+              enforce: true,
+            },
+          },
+        },
+    },
 };
 
 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}`)
+    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

@@ -9,7 +9,7 @@ const {
 const {EnvironmentPlugin} = require('webpack');
 const WebpackBar = require('webpackbar');
 
-const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
+//const { ServiceWorkerPlugin } = require('service-worker-webpack');
 
 const {env} = require('process');
 const modules = './modules';
@@ -51,10 +51,12 @@ const plugins = [
     new EnvironmentPlugin({
         NODE_ENV,
     }),
+    /*
     new ServiceWorkerWebpackPlugin({
         entry: join(__dirname, '..', 'client', 'sw', 'sw.js'),
         excludes: ['*'],
     }),
+    */
     new WebpackBar(),
 ];
 
@@ -66,6 +68,10 @@ const splitChunks = {
 module.exports = {
     resolve: {
         symlinks: false,
+        fallback: {
+            "path": require.resolve("path-browserify"),
+            "process": require.resolve("process/browser"),
+        },
     },
     devtool,
     optimization: {
@@ -101,7 +107,7 @@ module.exports = {
         devtoolModuleFilenameTemplate,
         publicPath: '/dist/',
     },
-    externals: [convertToWebpack5Externals(externals)],
+    externals: [externals],
     module: {
         rules,
         noParse,

client/sw/register.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const tryToCatch = require('try-to-catch');
+const {Workbox} = require('workbox-window');
 
 module.exports.registerSW = registerSW;
 module.exports.unregisterSW = unregisterSW;
@@ -20,8 +21,11 @@ async function registerSW(prefix) {
         return;
 
     const {serviceWorker} = navigator;
-    const register = serviceWorker.register.bind(serviceWorker);
-    const [e, sw] = await tryToCatch(register, `${prefix}/sw.js`);
+    //const register = serviceWorker.register.bind(serviceWorker);
+    //const [e, sw] = await tryToCatch(register, `${prefix}/sw.js`);
+     const wb = new Workbox(`${prefix}/sw.js`);
+     const register = wb.register.bind(wb);
+    const [e, sw] = await tryToCatch(register);
 
     if (e)
         return null;

package.json

@@ -189,8 +189,10 @@
     "morgan": "^1.6.1",
     "multi-rename": "^2.0.0",
     "nodemon": "^3.0.1",
+    "path-browserify": "^1.0.1",
     "philip": "^2.0.0",
     "place": "^1.1.4",
+    "process": "^0.11.10",
     "readjson": "^2.0.1",
     "request": "^2.76.0",
     "rimraf": "^5.0.1",

server/columns.js

@@ -16,7 +16,7 @@ const isDev = process.env.NODE_ENV === 'development';
 const getDist = (isDev) => isDev ? 'dist-dev' : 'dist';
 
 const dist = getDist(isDev);
-const columnsDir = path.join(__dirname, '..', dist, 'columns');
+const columnsDir = path.join(__dirname, '..', 'css', 'columns');
 
 const names = fs
     .readdirSync(columnsDir)