diff --git a/.madrun.mjs b/.madrun.mjs index 66d3fe0c..934a856a 100644 --- a/.madrun.mjs +++ b/.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', }), diff --git a/.webpack/css.js b/.webpack/css.js index 8ec50444..c633f118 100644 --- a/.webpack/css.js +++ b/.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,20 +22,17 @@ 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', @@ -46,13 +40,29 @@ const rules = [{ 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) { @@ -60,17 +70,8 @@ function getCSSList(dir) { 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']), - }; -} diff --git a/.webpack/js.js b/.webpack/js.js index 1353efdc..8a614e93 100644 --- a/.webpack/js.js +++ b/.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, diff --git a/client/sw/register.js b/client/sw/register.js index 12431a82..a05fea05 100644 --- a/client/sw/register.js +++ b/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; diff --git a/package.json b/package.json index 4ec337f2..173e5060 100644 --- a/package.json +++ b/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", diff --git a/server/columns.js b/server/columns.js index fd01e6b8..d997d0ac 100644 --- a/server/columns.js +++ b/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)