Webpack upgraded from 4 to 5 + dependancies updated

.stylelintrc

@@ -1,3 +1,13 @@
 {
-  "extends": "stylelint-config-standard"
+  "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  rules: {
+    'at-rule-no-unknown': null,
+    'no-duplicate-selectors': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'no-descending-specificity': null,
+    'scss/at-rule-no-unknown': true,
+  },
 }

app/config/webpack/common.js

@@ -4,8 +4,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 
 const rootDir = path.resolve(__dirname, '../../../');
 
-module.exports = function () {
-  return {
+module.exports = {
   entry: {
     material: path.join(rootDir, './app/Resources/static/themes/material/index.js'),
     baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'),
@@ -36,5 +35,4 @@ module.exports = function () {
       jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js'),
     },
   },
-  };
 };

app/config/webpack/dev.js

@@ -2,8 +2,7 @@ const { merge } = require('webpack-merge');
 const webpack = require('webpack');
 const commonConfig = require('./common.js');
 
-module.exports = function () {
-  return merge(commonConfig(), {
+module.exports = merge(commonConfig, {
   devtool: 'eval-source-map',
   output: {
     filename: '[name].dev.js',
@@ -32,7 +31,7 @@ module.exports = function () {
         use: {
           loader: 'babel-loader',
           options: {
-              presets: ['@babel/preset-env']
+            presets: ['@babel/preset-env'],
           },
         },
       },
@@ -49,7 +48,9 @@ module.exports = function () {
           {
             loader: 'postcss-loader',
             options: {
-                plugins: [require('autoprefixer')({})],
+              postcssOptions: {
+                plugins: ['autoprefixer'],
+              },
             },
           },
           'sass-loader',
@@ -61,5 +62,4 @@ module.exports = function () {
       },
     ],
   },
-  });
-};
+});

app/config/webpack/prod.js

@@ -6,19 +6,17 @@ const TerserPlugin = require('terser-webpack-plugin');
 
 const commonConfig = require('./common.js');
 
-module.exports = function () {
-  return merge(commonConfig(), {
+module.exports = merge(commonConfig, {
   output: {
     filename: '[name].js',
   },
   mode: 'production',
   devtool: 'source-map',
   optimization: {
+    minimize: true,
     minimizer: [
       new TerserPlugin({
-          cache: true,
         parallel: true,
-          sourceMap: true,
         terserOptions: {
           output: {
             comments: false,
@@ -26,18 +24,15 @@ module.exports = function () {
         },
         extractComments: false,
       }),
-      ]
+    ],
   },
   plugins: [
+    new MiniCssExtractPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
-          'NODE_ENV': JSON.stringify('production'),
+        NODE_ENV: JSON.stringify('production'),
       },
     }),
-      new MiniCssExtractPlugin({
-        filename: '[name].css',
-        chunkFilename: '[id].css',
-      }),
     new ManifestPlugin({
       fileName: 'manifest.json',
     }),
@@ -56,19 +51,14 @@ module.exports = function () {
         use: {
           loader: 'babel-loader',
           options: {
-              presets: ['@babel/preset-env']
+            presets: ['@babel/preset-env'],
           },
         },
       },
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                hmr: process.env.NODE_ENV === 'development',
-              },
-            },
+          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
@@ -78,7 +68,9 @@ module.exports = function () {
           {
             loader: 'postcss-loader',
             options: {
-                plugins: [require('autoprefixer')({})],
+              postcssOptions: {
+                plugins: ['autoprefixer'],
+              },
             },
           },
           'sass-loader',
@@ -116,5 +108,4 @@ module.exports = function () {
       },
     ],
   },
-  });
-};
+});

package.json

@@ -38,29 +38,32 @@
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.1",
-    "css-loader": "^4.3.0",
+    "css-loader": "^5.0.1",
     "eslint": "^7.13.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "^6.2.0",
     "lato-font": "^3.0.0",
-    "mini-css-extract-plugin": "^1.2.1",
+    "mini-css-extract-plugin": "^1.3.0",
     "node-sass": "^5.0.0",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.1.6",
+    "postcss-loader": "^4.0.4",
+    "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
     "style-loader": "^2.0.0",
-    "stylelint": "^7.9.0",
-    "stylelint-config-standard": "^16.0.0",
-    "stylelint-webpack-plugin": "^1.0.0",
+    "stylelint": "^13.7.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.18.0",
+    "stylelint-webpack-plugin": "^2.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.4.0",
+    "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0",
-    "webpack-manifest-plugin": "^2.2.0",
+    "webpack-manifest-plugin": "^3.0.0-rc.0",
     "webpack-merge": "^5.3.0"
   },
   "dependencies": {

webpack.config.js

@@ -1,8 +1,8 @@
 const path = require('path');
 
-function buildConfig(env) {
-  env = env || 'prod';
-  return require(path.resolve(__dirname, 'app/config/webpack/' + env + '.js'))({ env: env })
+function buildConfig(options) {
+  const env = options.prod ? 'prod' : 'dev';
+  return require(path.resolve(__dirname, `app/config/webpack/${env}.js`));
 }
 
 module.exports = buildConfig;