Upgrade to Webpack 5

Fixes #52
ttencate · Sep 29, 2023 · 7cf925a · 7cf925a
1 parent 2ac4599
commit 7cf925a
Show file tree

Hide file tree

Showing 6 changed files with 2,937 additions and 3,731 deletions.
diff --git a/app/package.json b/app/package.json
@@ -11,23 +11,25 @@
   },
   "scripts": {
     "clean": "rm -rf dist/",
-    "build": "webpack",
-    "watch": "webpack --watch",
-    "publish": "yarn run clean && yarn run build && rsync -rv --delete --exclude=.* dist/ thomas@frozenfractal.com:/var/www/jfxr.frozenfractal.com/"
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --watch",
+    "publish": "yarn clean && yarn build && rsync -rv --delete --exclude=.* dist/ thomas@frozenfractal.com:/var/www/jfxr.frozenfractal.com/"
   },
   "devDependencies": {
     "angular": "^1.3.14",
-    "css-loader": "^1.0.0",
-    "eslint": "^5.7.0",
-    "eslint-loader": "^2.1.1",
-    "file-loader": "^2.0.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.24.0",
+    "eslint-webpack-plugin": "^4.0.1",
     "file-saver": "^2.0.0-rc.4",
-    "html-webpack-plugin": "^4.0.0-beta.2",
-    "image-webpack-loader": "^4.4.0",
-    "mini-css-extract-plugin": "^0.4.4",
-    "sass": "^1.53.0",
-    "sass-loader": "^7.1.0",
-    "webpack": "^4.22.0",
-    "webpack-cli": "^3.1.2"
+    "html-webpack-plugin": "^5.5.3",
+    "image-minimizer-webpack-plugin": "^3.8.3",
+    "imagemin": "^8.0.1",
+    "imagemin-optipng": "^8.0.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   }
 }
diff --git a/app/webpack.config.js b/app/webpack.config.js
@@ -1,7 +1,10 @@
 const path = require('path');
 
+const ESLintPlugin = require('eslint-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const outputPath = path.resolve(__dirname, 'dist');
 
@@ -14,15 +17,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        options: {
-          emitWarning: true,
-        },
-      },
       {
         test: /\.scss$/,
         use: [
@@ -34,31 +28,37 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              outputStyle: 'compressed',
               sourceMap: true,
             },
           },
         ],
       },
       {
         test: /\.png$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              optipng: {
-                enabled: true,
-                optimizationLevel: 7,
-              },
-            },
-          },
-        ],
+        type: 'asset',
       },
     ],
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin(),
+      new ImageMinimizerPlugin({
+        minimizer: {
+          implementation: ImageMinimizerPlugin.imageminMinify,
+          options: {
+            plugins: [
+              ['optipng', { optimizationLevel: 7 }],
+            ],
+          },
+        },
+      }),
+    ],
+  },
   devtool: 'source-map',
   plugins: [
+    new ESLintPlugin({
+      emitWarning: true,
+    }),
     new HtmlWebpackPlugin({
       template: './index.html',
     }),