update major dependencies

Author: hardikkaji

package.json

@@ -1,11 +1,11 @@
 {
   "name": "angularjs-es6-starter-kit",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "AngularJS aka Angular 1, ES6, Webpack Starter Kit Project which includes Bootstrap 4 also.",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --progress --open",
-    "build": "NODE_ENV=production webpack -p",
+    "start": "webpack serve --progress --open",
+    "build": "NODE_ENV=production webpack",
     "test": "echo \"Error: no test specified\" && exit 1",
     "serve-build": "yarn build && node ./index.js"
   },
@@ -21,27 +21,27 @@
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-es2015-arrow-functions": "6.22.0",
     "babel-preset-es2015": "6.24.1",
-    "clean-webpack-plugin": "0.1.16",
+    "clean-webpack-plugin": "3.0.0",
     "css-loader": "0.28.4",
     "express": "^4.16.4",
-    "file-loader": "3.0.1",
-    "html-loader": "0.5.0",
-    "html-webpack-plugin": "3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
+    "file-loader": "6.2.0",
+    "html-loader": "2.1.2",
+    "html-webpack-plugin": "5.3.1",
+    "mini-css-extract-plugin": "1.6.0",
     "ng-annotate-loader": "0.6.1",
     "node-sass": "4.5.3",
-    "optimize-css-assets-webpack-plugin": "3.0.0",
+    "optimize-css-assets-webpack-plugin": "6.0.0",
     "sass-loader": "6.0.6",
     "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.1.2",
-    "url-loader": "0.5.9",
-    "webpack": "4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "3.2.1"
+    "terser-webpack-plugin": "5.1.3",
+    "url-loader": "4.1.1",
+    "webpack": "5.38.1",
+    "webpack-cli": "4.7.0",
+    "webpack-dev-server": "3.11.2"
   },
   "dependencies": {
-    "angular": "1.7.8",
-    "angular-ui-router": "1.0.22",
+    "angular": "1.8.2",
+    "angular-ui-router": "1.0.29",
     "bootstrap": "4.3.1",
     "font-awesome": "4.7.0",
     "jquery": "3.3.1",

webpack.config.js

@@ -1,10 +1,10 @@
 const webpack = require('webpack');
 const path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 const devMode = process.env.NODE_ENV !== 'production'
 
 const config = {
@@ -22,10 +22,11 @@ const config = {
 		rules: [
 			{
 				test: /\.js$/,
-				exclude: /node_modules/,
-				loader: ['ng-annotate-loader', 'babel-loader']
+				include: [path.resolve(__dirname, 'src')],
+				use: [ { loader: 'ng-annotate-loader'}, { loader: 'babel-loader'}]
 			},
 			{
+
 				test: /\.(scss)$/,
 				use: [
 					devMode ? { loader: "style-loader" } : MiniCssExtractPlugin.loader,
@@ -35,48 +36,57 @@ const config = {
 			},
 			// for fixing of loading bootstrap icon files
 			{
-				test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
-				loader: 'url-loader?limit=10000',
-				options: {
-					name: './fonts/[name].[ext]'
-				}
+				test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/i,
+				use: [{
+					loader: 'url-loader',
+					options: {
+						limit: 10000,
+						outputPath: 'fonts/',
+                        publicPath: '../fonts/',
+						esModule: false,
+					}
+				}],
 			},
 			{
 				test: /\.(eot|ttf)$/,
-				loader: 'file-loader',
-				options: {
-					name: './fonts/[name].[ext]'
-				}
+				use: [{
+					loader: 'file-loader',
+					options: {
+						outputPath: 'fonts/',
+                        publicPath: '../fonts/',
+						esModule: false,
+					}
+				}],
 			},
 			{ test: /\.html$/, loader: 'html-loader' }
 		]
 	},
 	optimization: {
+		minimize: true,
 		minimizer: [
-			new UglifyJsPlugin({
-				cache: true,
-			}),
+			new TerserPlugin(),
 			new OptimizeCssAssetsWebpackPlugin({})
 		]
 	},
 	plugins: [
-		new CleanWebpackPlugin('build'),
+		new CleanWebpackPlugin(),
 		new HtmlWebpackPlugin({ template: './src/index.html' }),
 		new webpack.ProvidePlugin({
 			jQuery: 'jquery',
 			$: 'jquery',
 			jquery: 'jquery'
 		}),
 		new MiniCssExtractPlugin({
-			filename: "styles/[name].[hash].css",
-			chunkFilename: "styles/[id].[hash].css"
+			filename: "[name].[fullhash].css",
+			chunkFilename: "[id].[fullhash].css"
 		})
 	],
 	devServer: {
 		port: 3000,
 		contentBase: './src/',
 		historyApiFallback: true
-	}
+	},
+	devtool: 'source-map',
 };
 
 module.exports = config;