refactor: Refactor webpack config and asset handling

- Improve webpack performance and configuration
- Delete unnecessary CSS and binary files
- Adjust ESLint ignored files list
- Update package.json with webpack mode for dev and prod scripts
- Move app.css to app.js in master.blade.php

.eslintrc.yml

@@ -4,6 +4,8 @@ extends: 'eslint:recommended'
 env:
   browser: true
   es6: true
+ignorePatterns:
+  - webpack.config.js
 rules:
   indent:
     - error

package-lock.json

@@ -20,13 +20,13 @@
                 "cssnano": "^6.0.1",
                 "eslint": "^8.39.0",
                 "eslint-webpack-plugin": "^4.0.1",
-                "mini-css-extract-plugin": "^2.7.5",
                 "postcss": "^8.4.23",
                 "postcss-combine-duplicated-selectors": "^10.0.2",
                 "postcss-combine-media-query": "^1.0.1",
                 "postcss-import": "^15.1.0",
                 "postcss-loader": "^7.3.0",
                 "postcss-nesting": "^11.2.2",
+                "style-loader": "^3.3.2",
                 "stylelint": "^15.6.1",
                 "stylelint-config-standard": "^33.0.0",
                 "stylelint-webpack-plugin": "^4.1.1",
@@ -4852,25 +4852,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/mini-css-extract-plugin": {
-            "version": "2.7.5",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz",
-            "integrity": "sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==",
-            "dev": true,
-            "dependencies": {
-                "schema-utils": "^4.0.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^5.0.0"
-            }
-        },
         "node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6468,6 +6449,22 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/style-loader": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz",
+            "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
+            "dev": true,
+            "engines": {
+                "node": ">= 12.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "webpack": "^5.0.0"
+            }
+        },
         "node_modules/style-search": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -10742,15 +10739,6 @@
             "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
             "dev": true
         },
-        "mini-css-extract-plugin": {
-            "version": "2.7.5",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz",
-            "integrity": "sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==",
-            "dev": true,
-            "requires": {
-                "schema-utils": "^4.0.0"
-            }
-        },
         "minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -11855,6 +11843,13 @@
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
             "dev": true
         },
+        "style-loader": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz",
+            "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
+            "dev": true,
+            "requires": {}
+        },
         "style-search": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",

package.json

@@ -16,13 +16,13 @@
         "cssnano": "^6.0.1",
         "eslint": "^8.39.0",
         "eslint-webpack-plugin": "^4.0.1",
-        "mini-css-extract-plugin": "^2.7.5",
         "postcss": "^8.4.23",
         "postcss-combine-duplicated-selectors": "^10.0.2",
         "postcss-combine-media-query": "^1.0.1",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.0",
         "postcss-nesting": "^11.2.2",
+        "style-loader": "^3.3.2",
         "stylelint": "^15.6.1",
         "stylelint-config-standard": "^33.0.0",
         "stylelint-webpack-plugin": "^4.1.1",
@@ -30,8 +30,8 @@
         "webpack-cli": "^5.0.2"
     },
     "scripts": {
-        "dev": "webpack",
+        "dev": "webpack --mode=development",
-        "prod": "NODE_ENV=production webpack"
+        "prod": "webpack --mode=production"
     },
     "browserslist": [
         "last 2 versions",

public/assets/app.css

@@ -1 +0,0 @@
-:root{--font-family-headings:"Archer SSm A","Archer SSm B",serif;--font-family-body:"Verlag A","Verlag B",sans-serif;--font-family-monospace:"Operator Mono SSm A","Operator Mono SSm B",monospace;--font-size-sm:0.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:#334800;--color-secondary:#e3ffb5;--color-link:#0064a5;--color-link-visited:#be76ff;--color-primary-shadow:rgba(15,25,0,.4)}@supports (color:color(display-p3 0 0 0)){:root{--color-primary:color(display-p3 0.21567 0.27838 0.03615);--color-secondary:color(display-p3 0.91016 0.99842 0.74082);--color-link:color(display-p3 0.01045 0.38351 0.63618);--color-link-visited:color(display-p3 0.70467 0.47549 0.99958);--color-primary-shadow:color(display-p3 0.06762 0.09646 0.00441/0.4)}}@supports (color:oklch(0% 0 0)){:root{--color-primary:oklch(36.8% 0.1 125.505);--color-secondary:oklch(96.3% 0.1 125.505);--color-link:oklch(48.09% 0.146 241.41);--color-link-visited:oklch(70.44% 0.21 304.41);--color-primary-shadow:oklch(19.56% 0.054 125.505/40%)}}body{background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{display:grid;grid-template-columns:5vw 1fr 5vw;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content;row-gap:1rem}#site-header{grid-column:2/3;grid-row:1/2}main{grid-row:2/3}footer,main{grid-column:2/3}footer{grid-row:3/4}footer .iwc-logo{max-width:85vw}a{color:var(--color-link)}a:visited{color:var(--color-link-visited)}#site-header a:visited{color:var(--color-link)}.hljs{border-radius:.5rem}.p-bridgy-twitter-content{display:none}.h-card .hovercard{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--color-secondary);border-radius:1rem;-webkit-box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);display:none;-ms-flex-direction:column;flex-direction:column;gap:.5rem;opacity:0;padding:1rem;position:absolute;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:100}.h-card .hovercard .u-photo{max-width:6rem}.h-card .hovercard .social-icon{height:1rem;width:1rem}.h-card:hover .hovercard{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.h-entry{-webkit-border-start:1px solid var(--color-primary);-webkit-padding-start:.5rem;border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem}.h-entry .reply-to{font-style:italic}.h-entry .post-info a{text-decoration:none}.h-entry .note-metadata{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}.h-entry .note-metadata .syndication-links{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.h-entry .note-metadata .syndication-links a{text-decoration:none}.h-entry .note-metadata .syndication-links a svg{height:1rem;width:1rem}

resources/views/master.blade.php

@@ -7,7 +7,6 @@
         @if (!empty(config('app.font_link')))
             <link rel="stylesheet" href="{{ config('app.font_link') }}">
         @endif
-        <link rel="stylesheet" href="/assets/app.css">
         <link rel="stylesheet" href="/assets/highlight/zenburn.css">
         <link rel="alternate" type="application/rss+xml" title="Blog RSS Feed" href="/blog/feed.rss">
         <link rel="alternate" type="application/atom+xml" title="Blog Atom Feed" href="/blog/feed.atom">
@@ -60,6 +59,7 @@
 
         <!--scripts go here when needed-->
         @section('scripts')
+            <script src="/assets/app.js"></script>
         @show
     </body>
 </html>

webpack.config.js

@@ -1,13 +1,11 @@
 const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const zlib = require('zlib');
 const EslintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
-    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+    devtool: 'eval-source-map',
-    devtool: 'source-map',
     entry: ['./resources/js/app.js'],
     output: {
         path: path.resolve('./public/assets'),
@@ -18,7 +16,9 @@ module.exports = {
             test: /\.css$/,
             exclude: /node_modules/,
             use: [
-                { loader: MiniCssExtractPlugin.loader },
+                {
+                    loader: 'style-loader'
+                },
                 {
                     loader: 'css-loader',
                     options: {
@@ -41,19 +41,17 @@ module.exports = {
             use: {
                 loader: 'babel-loader',
                 options: {
-                    presets: ['@babel/preset-env']
+                    presets: [
+                        ['@babel/preset-env', { targets: "defaults" }]
+                    ]
                 }
             }
         }]
     },
     plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'app.css',
-            chunkFilename: 'app.css',
-        }),
         new StyleLintPlugin({
             configFile: path.resolve(__dirname + '/.stylelintrc'),
-            context: path.resolve(__dirname + '/resources/css-2023'),
+            context: path.resolve(__dirname + '/resources/css'),
             files: '**/*.css',
         }),
         new EslintPlugin({