Merge pull request #1 from mortezakarimi/update-node

chore: upgrade node version and change related packages version also …

.nvmrc

@@ -1 +1 @@
-14
+18

package.json

@@ -16,57 +16,59 @@
     "lint": "npm run lint:js && npm run lint:scss"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.8",
-    "@babel/eslint-parser": "^7.13.8",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-transform-runtime": "^7.13.9",
-    "@babel/runtime": "^7.13.9",
-    "@popperjs/core": "^2.9.2",
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/runtime": "^7.20.6",
+    "@popperjs/core": "^2.11.6",
     "babel-core": "^6.26.3",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "copy-webpack-plugin": "^9.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^7.21.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.23.4",
-    "html-webpack-plugin": "^5.3.1",
-    "imagemin-webpack-plugin": "^2.4.2",
-    "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^4.14.1",
-    "postcss": "^8.3.4",
-    "postcss-loader": "^6.1.0",
-    "postcss-preset-env": "7.8.0",
-    "sass-loader": "^12.1.0",
-    "shx": "^0.3.3",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "webpack": "^5.37.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-dashboard": "^3.3.1",
-    "webpack-dev-server": "^3.11.2"
+    "css-loader": "^6.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "html-webpack-plugin": "^5.5.0",
+    "image-minimizer-webpack-plugin": "^3.8.1",
+    "mini-css-extract-plugin": "^2.7.2",
+    "node-sass": "^8.0.0",
+    "postcss": "^8.4.20",
+    "postcss-loader": "^7.0.2",
+    "postcss-preset-env": "^7.8.3",
+    "sass-loader": "^13.2.0",
+    "sharp": "^0.31.2",
+    "shx": "^0.3.4",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.16.0",
+    "stylelint-config-standard": "^29.0.0",
+    "svgo": "^3.0.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dashboard": "^3.3.7",
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.7.2",
-    "@fullcalendar/daygrid": "^5.7.2",
-    "@fullcalendar/interaction": "^5.7.2",
-    "@fullcalendar/list": "^5.7.2",
-    "@fullcalendar/timegrid": "^5.7.2",
+    "@fullcalendar/core": "^5.11.3",
+    "@fullcalendar/daygrid": "^5.11.3",
+    "@fullcalendar/interaction": "^5.11.3",
+    "@fullcalendar/list": "^5.11.3",
+    "@fullcalendar/timegrid": "^5.11.3",
     "babel-polyfill": "^6.26.0",
-    "bootstrap": "^5.0.1",
+    "bootstrap": "^5.2.3",
     "bootstrap-datepicker": "^1.9.0",
     "brand-colors": "^2.1.1",
     "chart.js": "^2.9.4",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
     "file-loader": "^6.2.0",
-    "fullcalendar": "^5.7.2",
+    "fullcalendar": "^5.11.3",
     "jquery": "^3.6.0",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "^2.0.4",

webpack/config.js

@@ -52,6 +52,7 @@ const optimization = {
 
 if (manifest.MINIFY) {
   optimization.minimizer = [
+    ...require('./plugins/imageminPlugin'),
     new CssMinimizerPlugin(),
     new TerserPlugin()
   ];
@@ -74,6 +75,10 @@ module.exports = {
   module: {
     rules,
   },
+  performance: {
+    maxEntrypointSize: 5120000,
+    maxAssetSize: 5120000
+  },
   optimization: optimization,
   resolve,
   plugins,

webpack/devServer.js

@@ -15,28 +15,34 @@ const
  */
 
 const devServer = {
-  contentBase        : manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
+  static:{
+    directory:  manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
+    watch: true,
+  },
   historyApiFallback : true,
   port               : manifest.IS_PRODUCTION ? 3001 : 3000,
   compress           : manifest.IS_PRODUCTION,
-  inline             : !manifest.IS_PRODUCTION,
-  watchContentBase: true,
   hot                : !manifest.IS_PRODUCTION,
   host               : '0.0.0.0',
-  disableHostCheck   : true, // [1]
-  overlay            : true,
-  stats: {
-    assets     : true,
-    children   : false,
-    chunks     : false,
-    hash       : false,
-    modules    : false,
-    publicPath : false,
-    timings    : true,
-    version    : false,
-    warnings   : true,
-    colors     : true,
+  allowedHosts       : "all",// [1]
+  client:{
+    overlay            : true,
+    progress           : true
   },
+  devMiddleware: {
+    stats: {
+      assets: true,
+      children: false,
+      chunks: false,
+      hash: false,
+      modules: false,
+      publicPath: false,
+      timings: true,
+      version: false,
+      warnings: true,
+      colors: true,
+    },
+  }
 };
 
 

webpack/manifest.js

@@ -28,7 +28,7 @@ const
   NODE_ENV       = process.env.NODE_ENV || 'development',
   IS_DEVELOPMENT = NODE_ENV === 'development',
   IS_PRODUCTION  = NODE_ENV === 'production',
-  MINIFY         = process.env.MINIFY === 'true';
+  MINIFY         = process.env.MINIFY === 'true'? true: IS_PRODUCTION;
 
 // ------
 // @Utils

webpack/plugins/imageminPlugin.js

@@ -1,7 +1,31 @@
-const
-  manifest          = require('../manifest'),
-  ImageminPlugin    = require('imagemin-webpack-plugin').default;
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
-module.exports = new ImageminPlugin({
-  disable: manifest.IS_DEVELOPMENT,
-});
+module.exports = [
+  new ImageMinimizerPlugin({
+    minimizer: {
+      implementation: ImageMinimizerPlugin.sharpMinify,
+      options: {
+        encodeOptions: {
+          // Your options for `sharp`
+          // https://sharp.pixelplumbing.com/api-output
+        },
+      }
+    }
+  }),
+  new ImageMinimizerPlugin({
+    minimizer: {
+      implementation: ImageMinimizerPlugin.svgoMinify,
+      options: {
+        encodeOptions: {
+          // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
+          multipass: true,
+          plugins: [
+            // set of built-in plugins enabled by default
+            // see: https://github.com/svg/svgo#default-preset
+            "preset-default",
+          ],
+        },
+      },
+    },
+  }),
+];

webpack/plugins/index.js

@@ -4,7 +4,6 @@ const
 const plugins = [];
 
 plugins.push(
-  require('./imageminPlugin'),
   ...(require('./htmlPlugin')),
   ...(require('./internal')),
   require('./caseSensitivePlugin'),

webpack/rules/fonts.js

@@ -1,5 +1,5 @@
 module.exports = {
   test: /\.(eot|svg|ttf|woff|woff2)$/,
   exclude : /(node_modules)/,
-  use     : ['file-loader'],
+  type: 'asset/resource',
 };

webpack/rules/images.js

@@ -1,10 +1,5 @@
 module.exports = {
-  test    : /\.(png|gif|jpg?g|svg)$/i,
+  test    : /\.(png|gif|jpg?g)$/i,
   exclude : /(node_modules)/,
-  use     : [{
-    loader: 'file-loader',
-    options: {
-      outputPath: 'assets',
-    },
-  }],
+  type: 'asset/resource',
 };

webpack/rules/index.js

@@ -1,6 +1,7 @@
 module.exports = [
   require('./js'),
   require('./images'),
+  require('./svg'),
   require('./css'),
   require('./sass'),
   require('./fonts'),

webpack/rules/svg.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: /\.(svg)$/i,
+  exclude : /(node_modules)/,
+  type: "asset",
+};