Implement Terser for JavaScript minification in production builds

- Add TerserPlugin to webpack configuration for advanced JS minification
- Configure optimization settings to use Terser in production mode
- Adjust Terser options for optimal compression and browser compatibility
- Include CssMinimizerPlugin for CSS optimization (if applicable)
- Update devtool option for appropriate source map generation in production

package.json

@@ -14,11 +14,15 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.84.1",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0",
-    "html-webpack-plugin": "^5.5.0"
+    "webpack-dev-server": "^4.15.0"
   },
   "scripts": {
     "start": "webpack serve --mode development",
@@ -37,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

webpack.config.js

@@ -1,8 +1,12 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 module.exports = (env, argv) => {
+  const isProduction = argv.mode === 'production';
+
   const config = {
     entry: './src/index.js',
     output: {
@@ -22,10 +26,41 @@ module.exports = (env, argv) => {
               presets: ['@babel/preset-env', '@babel/preset-react']
             }
           }
-        }
+        },
+        // CSS 규칙 추가 (만약 CSS 파일을 사용한다면)
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
       ]
     },
     optimization: {
+      minimize: isProduction,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              comparisons: false,
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              ascii_only: true,
+            },
+          },
+          parallel: true,
+        }),
+        new CssMinimizerPlugin(),
+      ],
       splitChunks: {
         chunks: 'all',
       },
@@ -47,6 +82,7 @@ module.exports = (env, argv) => {
         template: './public/index.html',
       }),
     ],
+    devtool: isProduction ? 'source-map' : 'eval-source-map',
   };
 
   if (env.analyze) {