update webpack config with latest changes to modernize config

ayan4m1 · Dec 10, 2024 · 534fb92 · 534fb92
1 parent 393384c
commit 534fb92
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -40,5 +40,11 @@ export default [
       }
     }
   },
+  {
+    files: ['webpack.config.babel.js'],
+    languageOptions: {
+      globals: globals.node
+    }
+  },
   prettierPlugin
 ];
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -1,9 +1,11 @@
 import { resolve } from 'path';
+import autoprefixer from 'autoprefixer';
 import HtmlPlugin from 'html-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import CnameWebpackPlugin from 'cname-webpack-plugin';
 import StylelintPlugin from 'stylelint-webpack-plugin';
+import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
 import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import { CleanWebpackPlugin as CleanPlugin } from 'clean-webpack-plugin';
@@ -15,26 +17,32 @@ const plugins = [
     domain: 'coilz.andrewdelisa.com'
   }),
   new CleanPlugin(),
-  new StylelintPlugin({
-    configFile: '.stylelintrc',
-    context: 'src',
-    files: '**/*.scss',
-    failOnError: true,
-    quiet: false,
-    customSyntax: 'postcss-scss'
-  }),
+
   new MiniCSSExtractPlugin({
     filename: '[name].css'
   }),
   new HtmlPlugin({
     template: './src/index.html'
-  }),
-  new ESLintPlugin({
-    configType: 'flat',
-    eslintPath: 'eslint/use-at-your-own-risk'
   })
 ];
 
+if (dev) {
+  plugins.push(
+    new StylelintPlugin({
+      configFile: '.stylelintrc',
+      context: 'src',
+      files: '**/*.scss',
+      failOnError: true,
+      quiet: false,
+      customSyntax: 'postcss-scss'
+    }),
+    new ESLintPlugin({
+      configType: 'flat',
+      eslintPath: 'eslint/use-at-your-own-risk'
+    })
+  );
+}
+
 export default {
   mode: dev ? 'development' : 'production',
   devtool: dev ? 'eval-cheap-module-source-map' : 'cheap-module-source-map',
@@ -54,22 +62,26 @@ export default {
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
-          dev ? 'style-loader' : MiniCSSExtractPlugin.loader,
+          MiniCSSExtractPlugin.loader,
           'css-loader',
           {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
                 ident: 'postcss',
-                plugins: [
-                  require('autoprefixer'),
-                  require('postcss-flexbugs-fixes')
-                ],
+                plugins: [autoprefixer, postcssFlexbugsFixes],
                 sourceMap: dev
               }
             }
           },
-          'sass-loader'
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true
+              }
+            }
+          }
         ]
       },
       {
@@ -98,13 +110,6 @@ export default {
     }
   },
   optimization: {
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          ecma: 12
-        }
-      }),
-      new CssMinimizerPlugin()
-    ]
+    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
   }
 };