dep: babel-loader + ts-loader => esbuild-loader

package.json

@@ -56,14 +56,13 @@
     "@typescript-eslint/parser": "^4.31.1",
     "@vue/compiler-sfc": "^3.2.12",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-modern-browsers": "^15.0.2",
     "bootstrap-vue-3": "^0.0.3",
     "bootswatch": "^5.1.1",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "esbuild-loader": "^2.15.1",
     "eslint": "^7.32.0",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.3.0",
@@ -71,7 +70,6 @@
     "sass": "^1.41.1",
     "sass-loader": "^12.1.0",
     "style-loader": "^3.2.1",
-    "ts-loader": "^9.2.5",
     "typescript": "^4.4.3",
     "url-loader": "^4.1.1",
     "vue-eslint-parser": "^7.11.0",

webpack.config.cjs

@@ -1,17 +1,17 @@
 const path = require('path');
 const { VueLoaderPlugin } = require('vue-loader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { resolve } = require('path');
 const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+const { ESBuildMinifyPlugin } = require('esbuild-loader')
 module.exports = (env, argv) => {
     const target = env.target ?? 'hwe';
     const mode = argv.mode ?? 'production';
     const tsDir = resolve(__dirname, `${target}/ts/`);
     const build_exports = require(`${tsDir}/build_exports.json`);
 
+    //TODO: esbuild에 browserslist 사용 가능하면 적용
 
     //서버마다 ts 파일 구성이 다를 가능성이 높기 때문에 어떤 파일이 필요한지는 ts/build_exports.json을 확인한다.
     const entryIngameVue = {};
@@ -58,14 +58,8 @@ module.exports = (env, argv) => {
                 },
             },
             minimizer: [
-                new CssMinimizerPlugin(),
+                new ESBuildMinifyPlugin({
-                new TerserPlugin({
+                    css: true
-                    terserOptions: {
-                        format: {
-                            comments: /@license/i,
-                        },
-                    },
-                    extractComments: true,
                 }),
             ],
             moduleIds: 'deterministic',
@@ -74,18 +68,27 @@ module.exports = (env, argv) => {
             rules: [
                 //FROM `vue inspect` and some tweaks
                 {
-                    test: /\.(ts|tsx)$/,
+                    test: /\.ts$/,
                     //exclude: /(node_modules)/,
                     use: [
-                        'babel-loader',
                         {
-                            loader: 'ts-loader',
+                            loader: 'esbuild-loader',
                             options: {
-                                transpileOnly: true,
+                                loader: 'ts',
-                                appendTsSuffixTo: [
+                                target: 'es2019',
-                                    '\\.vue$'
+                            }
-                                ],
+                        }
-                                happyPackMode: false
+                    ]
+                },
+                {
+                    test: /\.tsx$/,
+                    //exclude: /(node_modules)/,
+                    use: [
+                        {
+                            loader: 'esbuild-loader',
+                            options: {
+                                loader: 'tsx',
+                                target: 'es2019',
                             }
                         }
                     ]
@@ -94,7 +97,13 @@ module.exports = (env, argv) => {
                     test: /\.js$/,
                     exclude: /(node_modules)/,
                     use: [
-                        'babel-loader',
+                        {
+                            loader: 'esbuild-loader',
+                            options: {
+                                loader: 'js',
+                                target: 'es2019',
+                            }
+                        }
                     ]
                 },
                 {
@@ -194,35 +203,51 @@ module.exports = (env, argv) => {
                 },
             },
             minimizer: [
-                new CssMinimizerPlugin(),
+                new ESBuildMinifyPlugin({
-                new TerserPlugin({
+                    css: true
-                    terserOptions: {
-                        format: {
-                            comments: /@license/i,
-                        },
-                    },
-                    extractComments: true,
                 }),
             ],
             moduleIds: 'deterministic',
         },
         module: {
             rules: [{
-                test: /\.(ts|tsx)$/i,
+                test: /\.ts$/,
                 exclude: /(node_modules)/,
-                use: [{
+                use: [
-                    loader: 'babel-loader',
+                    {
-                    options: {
+                        loader: 'esbuild-loader',
-                        presets: [
+                        options: {
-                            ['@babel/preset-env', {
+                            loader: 'ts',
-                                "useBuiltIns": "usage",
+                            target: 'es2019',
-                                "corejs": 3,
+                        }
-                                "modules": false
-                            }],
-                            '@babel/preset-typescript'
-                        ]
                     }
-                }, 'ts-loader']
+                ]
+            },
+            {
+                test: /\.tsx$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'tsx',
+                            target: 'es2019',
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'js',
+                            target: 'es2019',
+                        }
+                    }
+                ]
             },
             {
                 test: /.(s?[ac]ss)$/,
@@ -270,35 +295,51 @@ module.exports = (env, argv) => {
                 },
             },
             minimizer: [
-                new CssMinimizerPlugin(),
+                new ESBuildMinifyPlugin({
-                new TerserPlugin({
+                    css: true
-                    terserOptions: {
-                        format: {
-                            comments: /@license/i,
-                        },
-                    },
-                    extractComments: true,
                 }),
             ],
             moduleIds: 'deterministic',
         },
         module: {
             rules: [{
-                test: /\.(ts|tsx)$/i,
+                test: /\.ts$/,
                 exclude: /(node_modules)/,
-                use: {
+                use: [
-                    loader: 'babel-loader',
+                    {
-                    options: {
+                        loader: 'esbuild-loader',
-                        presets: [
+                        options: {
-                            ['@babel/preset-env', {
+                            loader: 'ts',
-                                "useBuiltIns": "usage",
+                            target: 'es2019',
-                                "corejs": 3,
+                        }
-                                "modules": false
-                            }],
-                            '@babel/preset-typescript'
-                        ]
                     }
-                }
+                ]
+            },
+            {
+                test: /\.tsx$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'tsx',
+                            target: 'es2019',
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'js',
+                            target: 'es2019',
+                        }
+                    }
+                ]
             }, {
                 test: /.(s?[ac]ss)$/,
                 use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']