From 656d8fd60ce044d129cc21012ab0a97c15b91435 Mon Sep 17 00:00:00 2001 From: coderiaser Date: Thu, 3 Jul 2025 23:05:16 +0300 Subject: [PATCH] feature: webpack 5 --- .madrun.mjs | 2 + .webpack/cp.mjs | 17 ++++++++ .webpack/css.js | 74 +++++++++------------------------- .webpack/js.js | 15 ++++++- client/css.js | 2 +- client/modules/config/index.js | 4 +- client/modules/view/index.js | 4 +- package.json | 4 +- 8 files changed, 56 insertions(+), 66 deletions(-) create mode 100644 .webpack/cp.mjs diff --git a/.madrun.mjs b/.madrun.mjs index 0cc7a5ec..391eb946 100644 --- a/.madrun.mjs +++ b/.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'), diff --git a/.webpack/cp.mjs b/.webpack/cp.mjs new file mode 100644 index 00000000..1dacb044 --- /dev/null +++ b/.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, +}); diff --git a/.webpack/css.js b/.webpack/css.js index e1d6552d..7b4486e1 100644 --- a/.webpack/css.js +++ b/.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']), - }; -} diff --git a/.webpack/js.js b/.webpack/js.js index d41f9941..f1ebaffd 100644 --- a/.webpack/js.js +++ b/.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`, diff --git a/client/css.js b/client/css.js index e404bf94..25c9fdb3 100644 --- a/client/css.js +++ b/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'); diff --git a/client/modules/config/index.js b/client/modules/config/index.js index 0ec5b100..f9250e0a 100644 --- a/client/modules/config/index.js +++ b/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(), ]); diff --git a/client/modules/view/index.js b/client/modules/view/index.js index 17a3b1fa..cc663e98 100644 --- a/client/modules/view/index.js +++ b/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; } diff --git a/package.json b/package.json index b3fd4e38..6cdd73f1 100644 --- a/package.json +++ b/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",