Upgrade all packages

README.md

@@ -255,8 +255,8 @@ There are several scripts defined in the `package.json` file:
 
 ```json
 {
-	"build": "webpack --env.NODE_ENV=production",
-	"start": "webpack --watch --env.NODE_ENV=development",
+	"build": "webpack --mode=production",
+	"start": "webpack --watch --mode=development",
 	"optisize": "optisize --src=\"./assets/images\"",
 	"html": "php index.php > index.html",
 	"critical": "critical index.html > assets/dist/critical.css",

package.json

@@ -3,8 +3,8 @@
 	"version": "3.6.1",
 	"description": "Multi page app setup with webpack",
 	"scripts": {
-		"build": "webpack --NODE_ENV=production",
-		"start": "webpack --watch --NODE_ENV=development",
+		"build": "webpack --mode=production",
+		"start": "webpack --watch --mode=development",
 		"optisize": "optisize --src=\"./assets/images\"",
 		"html": "php index.php > index.html",
 		"critical": "node critical.js",
@@ -35,36 +35,38 @@
 		"@babel/core": "7.13.8",
 		"@babel/preset-env": "7.13.9",
 		"@three11/optisize": "1.3.0",
-		"autoprefixer": "9.8.6",
+		"autoprefixer": "10.2.5",
 		"babel-loader": "8.2.2",
 		"browser-sync": "2.26.14",
 		"browser-sync-webpack-plugin": "2.3.0",
 		"clean-webpack-plugin": "1.0.1",
 		"create-pwa": "2.3.1",
 		"critical": "3.0.0",
-		"css-loader": "3.5.3",
+		"css-loader": "5.1.1",
 		"cssnano": "4.1.10",
 		"eslint": "7.21.0",
 		"eslint-config-recommended": "4.1.0",
-		"extract-text-webpack-plugin": "4.0.0-beta.0",
 		"file-loader": "6.2.0",
-		"node-sass": "4.14.1",
+		"mini-css-extract-plugin": "1.3.9",
+		"node-sass": "5.0.0",
 		"node-sass-magic-importer": "5.3.2",
 		"postcss": "8.2.7",
+		"postcss-cli": "8.3.1",
 		"postcss-easy-import": "3.0.0",
 		"postcss-flexbugs-fixes": "5.0.2",
-		"postcss-loader": "4.2.0",
+		"postcss-loader": "5.1.0",
 		"postcss-merge-rules": "4.0.3",
+		"postcss-normalize": "9.0.0",
 		"postcss-url": "10.1.1",
 		"postcss-utilities": "0.8.4",
 		"postcss-watch-folder": "1.0.0",
-		"sass-loader": "10.1.1",
+		"sass-loader": "11.0.1",
 		"spritesh": "1.2.1",
 		"stylelint": "13.12.0",
 		"stylelint-config-recommended": "4.0.0",
-		"webpack": "4.46.0",
-		"webpack-cli": "3.3.12",
-		"webpack-shell-plugin": "0.5.0",
+		"webpack": "5.24.4",
+		"webpack-cli": "4.5.0",
+		"webpack-shell-plugin-next": "2.1.2",
 		"webpack-spritesmith": "1.1.0",
 		"yargs": "16.2.0"
 	},

renovate.json

@@ -9,6 +9,5 @@
 	"vulnerabilityAlerts": {
 		"labels": ["security"],
 		"assignees": ["@scriptex"]
-	},
-	"ignoreDeps": ["css-loader"]
+	}
 }

webpack.config.js

@@ -1,22 +1,22 @@
 // @ts-nocheck
 
-const fs = require('fs');
-const path = require('path');
 const { exec } = require('child_process');
-const { argv } = require('yargs');
 const { parse } = require('url');
+const { resolve } = require('path');
+const { readdirSync } = require('fs');
 
+const { argv } = require('yargs');
 const magicImporter = require('node-sass-magic-importer');
 const { ProvidePlugin } = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const SpritesmithPlugin = require('webpack-spritesmith');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
-const WebpackShellPlugin = require('webpack-shell-plugin');
+const WebpackShellPlugin = require('webpack-shell-plugin-next');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const { url, server, NODE_ENV } = argv;
+const { url, server, mode } = argv;
 const sourceMap = {
-	sourceMap: NODE_ENV === 'development'
+	sourceMap: mode === 'development'
 };
 
 if (server) {
@@ -25,22 +25,22 @@ if (server) {
 
 const svgoConfig = {
 	plugins: [
-		{ cleanupAttrs: true },
-		{ removeDoctype: true },
-		{ removeXMLProcInst: true },
-		{ removeComments: true },
-		{ removeMetadata: true },
-		{ removeUselessDefs: true },
-		{ removeEditorsNSData: true },
-		{ removeEmptyAttrs: true },
-		{ removeHiddenElems: false },
-		{ removeEmptyText: true },
-		{ removeEmptyContainers: true },
-		{ cleanupEnableBackground: true },
-		{ removeViewBox: false },
-		{ cleanupIDs: false },
-		{ convertStyleToAttrs: true },
-		{ removeUselessStrokeAndFill: true }
+		{ name: 'cleanupAttrs', active: true },
+		{ name: 'removeDoctype', active: true },
+		{ name: 'removeXMLProcInst', active: true },
+		{ name: 'removeComments', active: true },
+		{ name: 'removeMetadata', active: true },
+		{ name: 'removeUselessDefs', active: true },
+		{ name: 'removeEditorsNSData', active: true },
+		{ name: 'removeEmptyAttrs', active: true },
+		{ name: 'removeHiddenElems', active: false },
+		{ name: 'removeEmptyText', active: true },
+		{ name: 'removeEmptyContainers', active: true },
+		{ name: 'cleanupEnableBackground', active: true },
+		{ name: 'removeViewBox', active: false },
+		{ name: 'cleanupIDs', active: false },
+		{ name: 'convertStyleToAttrs', active: true },
+		{ name: 'removeUselessStrokeAndFill', active: true }
 	]
 };
 
@@ -108,18 +108,17 @@ const browserSyncConfig = {
 };
 
 const extractTextConfig = {
-	filename: 'dist/app.css',
-	allChunks: true
+	filename: 'dist/app.css'
 };
 
 const spritesmithConfig = {
 	src: {
-		cwd: path.resolve(__dirname, 'assets/images/sprite'),
+		cwd: resolve(__dirname, 'assets/images/sprite'),
 		glob: '*.png'
 	},
 	target: {
-		image: path.resolve(__dirname, './assets/dist/sprite.png'),
-		css: path.resolve(__dirname, './assets/styles/_sprite.scss')
+		image: resolve(__dirname, './assets/dist/sprite.png'),
+		css: resolve(__dirname, './assets/styles/_sprite.scss')
 	},
 	apiOptions: {
 		cssImageRef: '../dist/sprite.png'
@@ -134,16 +133,16 @@ const cleanConfig = {
 };
 
 const shellScripts = [];
-const svgs = fs.readdirSync('./assets/images/svg').filter(svg => svg[0] !== '.');
+const svgs = readdirSync('./assets/images/svg').filter(svg => svg[0] !== '.');
 
 if (svgs.length) {
 	shellScripts.push('svgo -f assets/images/svg --config=' + JSON.stringify(svgoConfig));
 	shellScripts.push('spritesh -q -i assets/images/svg -o ./assets/dist/sprite.svg -p svg-');
 }
 
 module.exports = () => {
-	const isDevelopment = NODE_ENV === 'development';
-	const isProduction = NODE_ENV === 'production';
+	const isDevelopment = mode === 'development';
+	const isProduction = mode === 'production';
 
 	if (isProduction) {
 		postcssOptions.plugins.push(require('postcss-merge-rules'), require('cssnano')());
@@ -159,10 +158,10 @@ module.exports = () => {
 	}
 
 	const config = {
-		mode: NODE_ENV,
+		mode: mode,
 		entry: ['./assets/styles/main.scss', './assets/scripts/main.js'],
 		output: {
-			path: path.resolve(__dirname, './assets'),
+			path: resolve(__dirname, './assets'),
 			filename: 'dist/app.js'
 		},
 		resolve: {
@@ -172,27 +171,28 @@ module.exports = () => {
 			rules: [
 				{
 					test: /\.(sa|sc|c)ss$/,
-					use: ExtractTextPlugin.extract({
-						use: [
-							{
-								loader: 'css-loader',
-								options: sourceMap
-							},
-							{
-								loader: 'postcss-loader',
-								options: { postcssOptions }
-							},
-							{
-								loader: 'sass-loader',
-								options: {
-									sassOptions: {
-										importer: magicImporter()
-									},
-									...sourceMap
-								}
+					use: [
+						{
+							loader: MiniCssExtractPlugin.loader
+						},
+						{
+							loader: 'css-loader',
+							options: sourceMap
+						},
+						{
+							loader: 'postcss-loader',
+							options: { postcssOptions }
+						},
+						{
+							loader: 'sass-loader',
+							options: {
+								sassOptions: {
+									importer: magicImporter()
+								},
+								...sourceMap
 							}
-						]
-					})
+						}
+					]
 				},
 				{
 					test: /\.js$/,
@@ -221,11 +221,13 @@ module.exports = () => {
 				jQuery: 'jquery',
 				'window.jQuery': 'jquery'
 			}),
-			new ExtractTextPlugin(extractTextConfig),
+			new MiniCssExtractPlugin(extractTextConfig),
 			new SpritesmithPlugin(spritesmithConfig),
 			new CleanWebpackPlugin(['../assets/dist/'], cleanConfig),
 			new WebpackShellPlugin({
-				onBuildStart: shellScripts
+				onBuildStart: {
+					scripts: shellScripts
+				}
 			})
 		],
 		externals: {