refactor: webpack 캐시를 활용한 빌드 속도 개선 (#672)

* chore: dev환경 webpack 설정 구현

* chore: common환경 webpack 설정 구현

* chore: prod환경 webpack 설정 구현

* chore: 기존 웹팩 환경 파일 제거

* chore: 불필요한 babelrc 파일 제거

* chore: 빌드 명령어 변경 및 사용하지 않는 라이브러리 제거

* chore: 타입체킹에 실패하면 빌드가 되지 않도록 설정

frontend/.webpack/webpack.common.js

@@ -1,18 +1,57 @@
 const path = require('path');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  entry: ['./src/index.tsx'],
+  entry: './src/index.tsx',
+
   output: {
-    path: path.resolve(__dirname, '../dist/'),
     publicPath: '/',
-    filename: '[name].[chunkhash:8].js',
+    path: path.join(__dirname, '../dist'),
+    filename: '[name].[chunkhash].js',
     clean: true,
   },
+
   resolve: {
-    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        sideEffects: true,
+      },
+      {
+        test: /\.(jpg|jpeg|gif|png|ico)?$/,
+        type: 'asset',
+        generator: {
+          filename: 'images/[name][ext]',
+        },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)?$/,
+        type: 'asset',
+        generator: {
+          filename: 'fonts/[name][ext]',
+        },
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+    ],
   },
 
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      filename: 'index.html',
+    }),
+    new MiniCssExtractPlugin(),
+  ],
+
   devServer: {
     static: {
       directory: path.resolve(__dirname, '../public'),
@@ -23,10 +62,6 @@ module.exports = {
     allowedHosts: 'all',
   },
 
-  optimization: {
-    minimizer: ['...', new CssMinimizerPlugin()],
-  },
-
   performance: {
     hints: false,
     maxEntrypointSize: 512000,

frontend/.webpack/webpack.dev.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  cache: {
+    type: 'filesystem',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/i,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          cacheCompression: false,
+          cacheDirectory: true,
+          presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'],
+          plugins: [
+            ['babel-plugin-styled-components'],
+            [
+              'babel-plugin-root-import',
+              {
+                rootPathPrefix: '~',
+                rootPathSuffix: 'src',
+              },
+            ],
+          ],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Dotenv({
+      path: path.resolve(__dirname, `../.msw.env`),
+    }),
+  ],
+});

frontend/.webpack/webpack.prod.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const { merge } = require('webpack-merge');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: false,
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/i,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: { browsers: ['last 2 versions', '>= 5% in KR'] },
+                useBuiltIns: 'usage',
+                corejs: {
+                  version: 3,
+                },
+              },
+            ],
+            ['@babel/preset-react', { runtime: 'automatic' }],
+            '@babel/preset-typescript',
+          ],
+          plugins: [
+            [
+              'babel-plugin-styled-components',
+              {
+                displayName: false,
+                minify: true,
+                transpileTemplateLiterals: true,
+                pure: true,
+              },
+            ],
+            [
+              'babel-plugin-root-import',
+              {
+                rootPathPrefix: '~',
+                rootPathSuffix: 'src',
+              },
+            ],
+          ],
+        },
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+    new Dotenv({
+      path: path.resolve(__dirname, `../.prod.env`),
+    }),
+  ],
+});

frontend/package.json

@@ -5,12 +5,10 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
-    "start:msw": "webpack serve --port 3000 --env TARGET_ENV=msw --mode development",
-    "start:dev": "webpack serve --port 3000 --env TARGET_ENV=dev --mode production",
-    "start:prod": "webpack serve --port 3000 --env TARGET_ENV=prod --mode production",
-    "build:msw": "webpack --env TARGET_ENV=msw --mode development",
-    "build:dev": "webpack --env TARGET_ENV=dev --mode production",
-    "build:prod": "webpack --env TARGET_ENV=prod --mode production",
+    "start:dev": "webpack serve --port 3000 --config .webpack/webpack.dev.js",
+    "start:prod": "webpack serve --port 3000 --config .webpack/webpack.prod.js",
+    "build:dev": "webpack --config .webpack/webpack.dev.js",
+    "build:prod": "webpack --config .webpack/webpack.prod.js",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:css": "stylelint './src/**/*.{tsx,ts,jsx,js}'",
     "lint:css:fix": "stylelint './src/**/*.{tsx,ts,jsx,js}' --fix",
@@ -45,7 +43,6 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",
@@ -77,7 +74,6 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cypress": "^13.3.1",
-    "dotenv": "^16.3.1",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -96,7 +92,6 @@
     "msw": "^1.3.2",
     "postcss-styled-syntax": "^0.5.0",
     "prettier": "^3.0.3",
-    "react-refresh": "^0.14.0",
     "storybook": "^7.0.25",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.3",
@@ -105,7 +100,6 @@
     "stylelint-order": "^6.0.3",
     "terser-webpack-plugin": "^5.3.9",
     "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.0",
     "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",

frontend/tsconfig.json

@@ -11,6 +11,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowSyntheticDefaultImports": true,
     "jsx": "preserve",
+    "noEmitOnError": true,
     "typeRoots": ["node_modules/@types", "src/@types"],
     "removeComments": true,
     "declaration": true,