From f5c5b56492d0543ab80499f89392590c893a9823 Mon Sep 17 00:00:00 2001 From: hide_d Date: Sat, 18 Sep 2021 04:31:31 +0900 Subject: [PATCH] dep: babel-loader + ts-loader => esbuild-loader --- package.json | 4 +- webpack.config.cjs | 163 ++++++++++++++++++++++++++++----------------- 2 files changed, 103 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index d325c5b1..47cab1be 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.cjs b/webpack.config.cjs index 48a6b356..3e7cce12 100644 --- a/webpack.config.cjs +++ b/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 TerserPlugin({ - terserOptions: { - format: { - comments: /@license/i, - }, - }, - extractComments: true, + new ESBuildMinifyPlugin({ + css: 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, - appendTsSuffixTo: [ - '\\.vue$' - ], - happyPackMode: false + loader: 'ts', + target: 'es2019', + } + } + ] + }, + { + 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 TerserPlugin({ - terserOptions: { - format: { - comments: /@license/i, - }, - }, - extractComments: true, + new ESBuildMinifyPlugin({ + css: true }), ], moduleIds: 'deterministic', }, module: { rules: [{ - test: /\.(ts|tsx)$/i, + test: /\.ts$/, exclude: /(node_modules)/, - use: [{ - loader: 'babel-loader', - options: { - presets: [ - ['@babel/preset-env', { - "useBuiltIns": "usage", - "corejs": 3, - "modules": false - }], - '@babel/preset-typescript' - ] + use: [ + { + loader: 'esbuild-loader', + options: { + loader: 'ts', + target: 'es2019', + } } - }, '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 TerserPlugin({ - terserOptions: { - format: { - comments: /@license/i, - }, - }, - extractComments: true, + new ESBuildMinifyPlugin({ + css: true }), ], moduleIds: 'deterministic', }, module: { rules: [{ - test: /\.(ts|tsx)$/i, + test: /\.ts$/, exclude: /(node_modules)/, - use: { - loader: 'babel-loader', - options: { - presets: [ - ['@babel/preset-env', { - "useBuiltIns": "usage", - "corejs": 3, - "modules": false - }], - '@babel/preset-typescript' - ] + use: [ + { + loader: 'esbuild-loader', + options: { + loader: 'ts', + target: 'es2019', + } } - } + ] + }, + { + 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']