webpack, css, terser, babel

package.json

@@ -31,9 +31,16 @@
   "homepage": "https://github.com/ReznoRMichael/hollow-knight-completion-check#readme",
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
     "css-loader": "^5.0.1",
     "eslint": "^7.18.0",
+    "mini-css-extract-plugin": "^1.3.4",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "url-loader": "^4.1.1",
     "webpack": "^5.17.0",
     "webpack-cli": "^4.4.0"
   }

src/js/index.js

@@ -1,3 +1,4 @@
+/* global require */
 require("../css/fontello.css");
 require("../css/style.css");
 // AES JS

webpack.config.js

@@ -1,24 +1,44 @@
-/* eslint-disable */
+/* global require module __dirname */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
 module.exports = {
     entry: './src/js/index.js',
-    mode: 'development',
+    mode: 'production', // or development
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                extractComments: false,
+            }),
+            new OptimizeCssAssetsPlugin(),
+        ],
+    },
     output: {
         path: `${__dirname}/docs`,
         filename: 'app.js',
     },
+    plugins: [new MiniCssExtractPlugin()],
     module: {
-        rules: [
+        rules: [{
-          {
                 test: /\.js$/,
                 exclude: /node_modules/,
             },
             {
                 test: /\.css$/,
                 use: [
-              'style-loader',
+                    MiniCssExtractPlugin.loader,
+                    // 'style-loader',
                     'css-loader',
                 ],
             },
+            {
+                test: /\.(svg|jpg|png|ttf|eot|woff|woff2)$/,
+                use: [
+                    'url-loader',
                 ],
             },
-  };
+        ],
+    },
+};