feature: migrate to webpack v5

.madrun.mjs

@@ -43,7 +43,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',
     }),
@@ -57,6 +59,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:*'),
+    'build:dev': async () => run('6to5:client:dev'),
     'build:client': () => run('6to5:client'),
     'build:client:dev': () => run('6to5:client:dev'),
     'heroku-postbuild': () => run('6to5:client'),

.putout.json

@@ -1,6 +1,7 @@
 {
     "plugins": [
-        "cloudcmd"
+        "cloudcmd",
+        "webpack"
     ],
     "ignore": [
         "html",

.webpack/css.js

@@ -1,4 +1,4 @@
-'use strict';
+'se strict';
 
 const fs = require('fs');
 const {
@@ -7,14 +7,22 @@ const {
     join,
 } = require('path');
 
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+//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} = process;
 const isDev = env.NODE_ENV === 'development';
 
-const extractCSS = (a) => new ExtractTextPlugin(`${a}.css`);
-const extractMain = extractCSS('[name]');
+//const extractCSS = (a) => new ExtractTextPlugin(`${a}.css`);
+const extractCSS = (a) => new MiniCssExtractPlugin({
+    filename: `${a}.css`,
+});
+
+const extractMain = new MiniCssExtractPlugin({
+    chunkFilename: '[name]',
+});
 
 const cssNames = [
     'nojs',
@@ -28,18 +36,24 @@ const cssNames = [
 const cssPlugins = cssNames.map(extractCSS);
 const clean = (a) => a.filter(Boolean);
 
-const plugins = clean([
-    ...cssPlugins,
-    extractMain,
-    !isDev && new OptimizeCssAssetsPlugin(),
-]);
+const plugins = [//clean([
+    //...cssPlugins,
+    //extractMain,
+    //!isDev && new OptimizeCssAssetsPlugin(),
+    new MiniCssExtractPlugin(),
+    new CssMinimizerPlugin(),
+];//);
 
 const rules = [{
     test: /\.css$/,
-    exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/,
+    //exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/,
+    use: [MiniCssExtractPlugin.loader, "css-loader"],
+    //use: [extractMain().loader, "css-loader"],
+    /*
     use: extractMain.extract([
         'css-loader',
     ]),
+    */
 },
 ...cssPlugins.map(extract), {
     test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
@@ -69,13 +83,17 @@ function getCSSList(dir) {
 }
 
 function extract(extractPlugin) {
-    const {filename} = extractPlugin;
+    const {filename} = extractPlugin.options;
+    console.log(':::', filename);
     
     return {
         test: RegExp(`css/${filename}`),
+     use: [new MiniCssExtractPlugin(), "css-loader"],
+     /*
         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 ServiceWorkerWebpackPlugin2 = require('serviceworker-webpack-plugin2');
 
 const dir = './client';
 const dirModules = './client/modules';
@@ -51,10 +51,12 @@ const plugins = [
         NODE_ENV,
     }),
     
-    new ServiceWorkerWebpackPlugin({
+    /*
+    new ServiceWorkerWebpackPlugin2({
         entry: join(__dirname, '..', 'client', 'sw', 'sw.js'),
         excludes: ['*'],
     }),
+    */
     
     new WebpackBar(),
 ];
@@ -67,6 +69,7 @@ const splitChunks = {
 module.exports = {
     resolve: {
         symlinks: false,
+        fallback: { "path": require.resolve("path-browserify") }
     },
     devtool,
     optimization: {
@@ -116,7 +119,7 @@ module.exports = {
     },
 };
 
-function externals(context, request, fn) {
+function externals({request}, fn) {
     if (!isDev)
         return fn();
     

client/client.js

@@ -141,7 +141,7 @@ function CloudCmdProto(DOM) {
     
     async function loadStyle() {
         const {prefix} = CloudCmd;
-        const name = prefix + '/dist/cloudcmd.common.css';
+        const name = prefix + '/dist/modules/cloud.css';
         
         await load.css(name);
     }

client/modules/config/index.js

@@ -57,7 +57,7 @@ module.exports.init = async () => {
     [Template] = await Promise.all([
         Files.get('config-tmpl'),
         loadSocket(),
-        loadCSS(prefix + '/dist/config.css'),
+        loadCSS(prefix + '/dist/modules/config.css'),
         CloudCmd.View(),
     ]);
     

client/modules/terminal.js

@@ -31,7 +31,7 @@ const loadAll = async () => {
     
     const prefixGritty = getPrefix();
     const js = `${prefixGritty}/gritty.js`;
-    const css = `${prefix}/dist/terminal.css`;
+    const css = `${prefix}/dist/modules/terminal.css`;
     
     const [e] = await tryToCatch(loadParallel, [js, css]);
     

client/modules/view/index.js

@@ -323,7 +323,7 @@ async function loadAll() {
     time(Name + ' load');
     
     Loading = true;
-    await loadCSS(`${prefix}/dist/view.css`);
+    await loadCSS(`${prefix}/dist/modules/view.css`);
     Loading = false;
 }
 

package.json

@@ -165,13 +165,13 @@
     "clean-css-loader": "^4.2.1",
     "codegen.macro": "^4.0.0",
     "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
     "css-modules-require-hook": "^4.2.3",
     "domtokenlist-shim": "^1.2.0",
     "emitify": "^4.0.1",
     "eslint": "^8.0.1",
     "eslint-plugin-n": "^15.2.4",
     "eslint-plugin-putout": "^16.0.0",
-    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
     "gritty": "^7.0.0",
     "gunzip-maybe": "^1.3.1",
     "html-looks-like": "^1.0.2",
@@ -189,7 +189,7 @@
     "morgan": "^1.6.1",
     "multi-rename": "^2.0.0",
     "nodemon": "^2.0.1",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "path-browserify": "^1.0.1",
     "philip": "^2.0.0",
     "place": "^1.1.4",
     "readjson": "^2.0.1",

server/columns.js

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