Upgrade to webpack 5

.gitignore

@@ -30,3 +30,4 @@ package-lock.json
 # ----------------------------
 
 build/
+dist/

browserslist

@@ -1 +1,2 @@
 Last 3 versions
+IE 11

package.json

@@ -1,14 +1,14 @@
 {
   "name": "adminator",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
-    "start": "webpack-dev-server",
-    "dev": "webpack-dashboard -t 'Project' -- webpack-dev-server",
-    "clean": "shx rm -rf ./build",
+    "start": "webpack server",
+    "dev": "webpack-dashboard -t 'Project' -- webpack server",
+    "clean": "shx rm -rf ./dist",
     "build": "npm run clean && cross-env webpack",
-    "preview": "cross-env webpack-dev-server",
+    "preview": "cross-env webpack server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
     "lint": "npm run lint:js && npm run lint:scss"
@@ -25,26 +25,27 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^1.0.1",
+    "css-loader": "^5.2.6",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "2.22.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^4.14.1",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^5.3.0",
     "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^11.1.1",
     "shx": "^0.3.3",
-    "style-loader": "^1.3.0",
-    "stylelint": "^13.11.0",
-    "stylelint-config-standard": "^20.0.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
+    "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"
   },
@@ -56,7 +57,7 @@
     "chart.js": "^2.9.4",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
-    "file-loader": "^2.0.0",
+    "file-loader": "^6.2.0",
     "fullcalendar": "^3.10.0",
     "jquery": "^3.6.0",
     "jquery-sparkline": "^2.4.0",

webpack/config.js

@@ -50,16 +50,16 @@ const resolve = {
 // -----------------
 
 module.exports = {
-  devtool: manifest.IS_PRODUCTION ? false : 'cheap-eval-source-map',
+  devtool: manifest.IS_PRODUCTION ? false : 'source-map',
   context: path.join(manifest.paths.src, manifest.entries.js),
-  watch: !manifest.IS_PRODUCTION,
+  // watch: !manifest.IS_PRODUCTION,
   entry,
   mode: manifest.NODE_ENV,
-  output: {
-    path: manifest.paths.build,
-    publicPath: '',
-    filename: manifest.outputFiles.bundle,
-  },
+  // output: {
+  //   path: manifest.paths.build,
+  //   publicPath: '',
+  //   filename: manifest.outputFiles.bundle,
+  // },
   module: {
     rules,
   },

webpack/rules/images.js

@@ -1,5 +1,5 @@
 module.exports = {
-  test    : /\.(png|gif|jpg|svg)$/i,
+  test    : /\.(png|gif|jpg?g|svg)$/i,
   exclude : /(node_modules)/,
   use     : [{
     loader: 'file-loader',

webpack/rules/sass.js

@@ -28,27 +28,33 @@ const loaders = [
     loader: 'css-loader',
     options: {
       sourceMap : manifest.IS_DEVELOPMENT,
-      minimize  : manifest.IS_PRODUCTION,
+      // minimize  : manifest.IS_PRODUCTION,
     },
   },
   {
     loader: 'postcss-loader',
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
-      plugins: () => [
-        cssNext(),
-      ],
+      postcssOptions: {
+        plugins: [
+          [
+            cssNext(),
+          ],
+        ],
+      },
     },
   },
   {
     loader: 'sass-loader',
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
-      includePaths: [
-        path.join('../../', 'node_modules'),
-        path.join(manifest.paths.src, 'assets', 'styles'),
-        path.join(manifest.paths.src, ''),
-      ],
+      sassOptions: {
+        includePaths: [
+          path.join('../../', 'node_modules'),
+          path.join(manifest.paths.src, 'assets', 'styles'),
+          path.join(manifest.paths.src, ''),
+        ],
+      },
     },
   },
 ];