Webpack을 설정하면서..

CRA란?

CRA란 리액트 프로젝트를 쉽게 만들 수 있도록 모듈 혹은 설정을 포함하는 보일러 플레이트입니다.

CRA를 통해 react를 설치하면 on build dependency를 가집니다.

React 프로젝트를 구성할 때 필요한 Webpack, Babel의 연결에 관해서 신경쓰지 않아도 됩니다.

 

Babel이란?

Babel이란 자바스크립트 컴파일러입니다. 

React에서 사용하는 JSX 문법을 자바스크립트로 변환해주고,

최신 문법의 JS를 낮은 버전의 JS로 변환해주는 역할도 합니다.

또한 타입스크립트도 변환해줍니다.

 

CRA대신 Webpack을 사용하는 이유

개발해야하는 서비스의 규모가 커지거나 컴포넌트들의 양이 많아질수록 리액트 개발환경에 추가적인 설정을 해야하는 경우가 생깁니다.

이 때 리액트의 구조나 Webpack, babel에 대한 이해도가 떨어지면 다른 설정을 추가할 때 많은 에러들이 발생할 수 있습니다.

 

CRA에서 eject라는 기능을 통해 따로 웹팩을 설정할 수 있지만 eject를 수행하고 나면 다시 예전 상태로 되돌릴 수 없고 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃어버리게 됩니다.

Webpakc의 4가지 개념

1. Entry (진입점)
Entry는 애플리케이션의 시작점을 정의합니다.

Webpack은 이 지점을 기준으로 의존성을 분석하고, 필요한 모듈을 모두 포함하여 번들링합니다.

보통 `src/index.js`와 같은 파일이 Entry로 설정됩니다.

module.exports = {
  entry: './src/index.js',
};

2.Output (출력)
Output은 Webpack이 생성한 번들이 저장될 위치와 파일 이름을 정의합니다. 

이 설정을 통해 빌드 후 결과물을 어디에 저장할 것인지 지정할 수 있습니다.

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

3. Loaders (로더)
Loaders는 Webpack이 파일을 처리하는 방법을 정의합니다.

웹팩은 오직 자바스크립트와 json만 이해할 수 있습니다.

 

로더는 소스 파일을 변환하여 Webpack이 이해할 수 있는 형식으로 바꿉니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

 

4. Plugins (플러그인)
Plugins는 Webpack의 기능을 확장하는 데 사용됩니다. 

플러그인은 애플리케이션의 빌드 프로세스에 다양한 작업을 추가할 수 있으며, 코드 압축, 환경 변수 설정, HTML 파일 생성 등 다양한 작업을 수행할 수 있습니다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

 

 

---

🛠️웹팩 환경 설정하기

npm init -y

npm install @emotion/react \
  @emotion/styled \
  @types/react-beautiful-dnd \
  clean-webpack-plugin \
  react \
  react-beautiful-dnd \
  react-dom \
  
npm install --save-dev @babel/core \
  @babel/preset-env \
  @babel/preset-react \
  @babel/preset-typescript \
  @types/node \
  @types/react \
  @types/react-dom \
  @types/webpack \
  @types/webpack-dev-server \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  babel-loader \
  core-js \
  css-loader \
  css-minimizer-webpack-plugin \
  eslint \
  eslint-config-prettier \
  eslint-plugin-prettier \
  eslint-plugin-react \
  html-webpack-plugin \
  mini-css-extract-plugin \
  prettier \
  ts-node \
  typescript \
  webpack \
  webpack-cli \
  webpack-dev-server \
  webpack-merge

# 일반 의존성
npm install @emotion/react \  # Emotion 라이브러리의 React용 패키지 (CSS-in-JS 솔루션)
  @emotion/styled \  # Emotion을 사용하여 styled components를 생성하기 위한 패키지
  @types/react-beautiful-dnd \  # react-beautiful-dnd 라이브러리를 TypeScript에서 사용할 수 있도록 하는 타입 정의
  clean-webpack-plugin \  # Webpack 빌드 시 이전 파일들을 자동으로 삭제해주는 플러그인
  react \  # UI 구성 요소를 만들기 위한 JavaScript 라이브러리
  react-beautiful-dnd \  # 드래그 앤 드롭 기능을 제공하는 React 라이브러리
  react-dom \  # React의 DOM 관련 기능을 제공하는 라이브러리

# 개발 의존성
npm install --save-dev @babel/core \  # Babel의 핵심 패키지 (JavaScript 변환 기능)
  @babel/preset-env \  # 최신 JavaScript 문법을 구형 브라우저에서도 호환되도록 변환
  @babel/preset-react \  # React JSX 문법을 변환하기 위한 Babel 프리셋
  @babel/preset-typescript \  # TypeScript 코드를 JavaScript로 변환하기 위한 Babel 프리셋
  @types/node \  # Node.js의 타입 정의 파일 (TypeScript에서 Node.js 모듈 사용 가능)
  @types/react \  # React의 타입 정의 파일 (TypeScript에서 React 사용 가능)
  @types/react-dom \  # React DOM의 타입 정의 파일 (TypeScript에서 React DOM 사용 가능)
  @types/webpack \  # Webpack의 타입 정의 파일 (TypeScript에서 Webpack 사용 가능)
  @types/webpack-dev-server \  # Webpack Dev Server의 타입 정의 파일 (TypeScript에서 사용 가능)
  @typescript-eslint/eslint-plugin \  # TypeScript 코드를 위한 ESLint 플러그인
  @typescript-eslint/parser \  # TypeScript 코드를 ESLint에서 분석할 수 있도록 해주는 파서
  babel-loader \  # Webpack에서 Babel을 사용하여 JavaScript 파일을 변환하는 로더
  core-js \  # ECMAScript 표준의 폴리필을 제공하는 라이브러리
  css-loader \  # CSS 파일을 모듈로 변환하고 @import와 url()을 처리하는 Webpack 로더
  css-minimizer-webpack-plugin \  # CSS 파일을 최적화하고 압축하는 Webpack 플러그인
  eslint \  # JavaScript 코드를 검사하고 품질을 유지하기 위한 정적 코드 분석 도구
  eslint-config-prettier \  # ESLint와 Prettier의 충돌을 방지하기 위한 설정 파일
  eslint-plugin-prettier \  # Prettier를 ESLint 규칙으로 통합하여 코드 스타일을 검사하는 플러그인
  eslint-plugin-react \  # React 관련 코드의 품질을 검사하기 위한 ESLint 플러그인
  html-webpack-plugin \  # Webpack 빌드 결과물을 HTML 파일로 생성하는 플러그인
  mini-css-extract-plugin \  # CSS를 별도의 파일로 추출하기 위한 Webpack 플러그인
  prettier \  # 코드 포맷팅을 자동으로 수행해주는 도구
  ts-node \  # TypeScript 파일을 실행할 수 있도록 해주는 Node.js 실행기
  typescript \  # TypeScript 언어를 사용하여 개발하기 위한 패키지
  webpack \  # 모듈 번들러 (여러 파일을 하나의 번들로 묶어주는 도구)
  webpack-cli \  # Webpack을 명령줄에서 사용할 수 있도록 해주는 CLI 도구
  webpack-dev-server \  # Webpack 개발 서버 (파일 변경 시 실시간으로 브라우저 업데이트)
  webpack-merge \  # 여러 Webpack 설정 파일을 쉽게 병합할 수 있도록 도와주는 유틸리티

 

---

🤔ts-loader와 babel-loader?

webpack으로 TypeSciprt를 다룰 때 2가지 방법이 있다.

바로 babel-loader + @babel/preset-typescript와 ts-loader를 사용하는 것이다.

📖babel-loader + @babel/preset-typescript 사용예시

babel-loader를 사용하는 방법은 webpack.confing.js는 아래와 같이 구성하고,

 module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
    ]
  },

.babelrc 파일에 preset을 포함시키면 된다.

//.babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

 

📖 ts-loader 사용 예시

npm install --save-dev typescript ts-loader

tsconfig.json 파일을 루트 디렉터리에 만든 후 원하는 설정을 추가한다.

{
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "strict": true
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*"]
}

webpack.config.js 파일을 만들고 ts-loader를 설정한다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

 

루트 디렉터리에 src 파일을 만든 후 index.ts를 생성한다.

'npx webpack'을 터미널에 입력하면 실행할 수 있다.

📖babel-loader + @babel/preset-typescript와 ts-loader의 차이점

'babel-loader + @babel/preset-typescript'의 경우 타입 검사를 하지 않는다.

따라서 트랜스 파일링 속도가 빠르다.

 

반면, 'ts-loader'의 경우 타입 검사를 하기 때문에 트랜스 파일링 속도가 상대적으로 느리다.\

const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

const result = greet(123);
console.log(result);

 

해당 코드를 index.ts에 작성하고 webpack을 실행하면 

'babel-loader + @babel/preset-typescript'의 경우는

아무 문제 없이 실행되는 것을 볼 수 있다.

반면, 'ts-loader'의 경우

에러가 발생한다.

따라서 개발 단계에서는 타입 검사를 위해 'ts-loader'를 사용하고,

프로덕션 단계에서는 babel-loader를 사용하면 둘의 장점을 고루 느낄 수 있을 것이다.

 

🔗참고링크

https://hae-on.tistory.com/101

webpack의 babel-loader와 ts-loader

 

---

🤔devtool: 'source-map'은 무슨 옵션일까?

devtool: 'source-map' 옵션은 Webpack에서 소스 맵을 생성하는 설정입니다.

1. devtool: 'inline-source-map'

설명: 소스 맵을 번들 파일에 직접 포함합니다. 즉, 소스 맵이 각 모듈의 코드와 함께 포함되어 브라우저에서 직접 사용할 수 있습니다.

장점:

• 디버깅 시 빠른 로딩 속도를 제공합니다.
• 별도의 소스 맵 파일이 필요 없으므로 파일 관리가 간편합니다.

단점:

• 번들 파일의 크기가 커질 수 있으며, 이는 프로덕션 환경에서 비효율적입니다.

2. devtool: 'source-map'

설명: 소스 맵을 별도의 파일로 생성합니다. 이 파일은 번들된 코드와 원본 소스 코드 간의 매핑 정보를 포함합니다.

장점:

• 정확한 디버깅 정보를 제공하며, 프로덕션 환경에서도 사용 가능합니다.
• 소스 맵 파일이 별도로 존재하므로, 코드의 크기에 영향을 주지 않습니다.

단점:

• 디버깅할 때 소스 맵 파일을 별도로 요청해야 하므로 약간의 성능 저하가 있을 수 있습니다.

3. devtool: 'cheap-module-source-map'

설명: 소스 맵을 생성하되, 각 모듈의 라인 번호 및 컬럼 정보는 포함하지 않습니다. 즉, 각 모듈에 대한 매핑 정보만 제공합니다.

장점:

• 빠른 빌드 속도를 제공합니다.
• 디버깅 정보는 제공하지만, 정확도는 떨어집니다 (라인과 컬럼 정보가 없으므로).

단점:

• 디버깅 시 정확한 위치를 찾기 어려울 수 있습니다.

 

---

🤔배포환경을 위해서는 어떤 설정을 해야할까?

나는 webpack merge를 이용해서 배포환경과 개발환경 분리해서 파일로 관리하려고 했다.

이를 통해서 더욱 쉽게 배포환경과 개발환경을 관리할 수 있었다.

포인트는 개발환경에서 ts-loader를, 배포환경에서는 babel-loader를 사용했다.

webpack.common.ts

import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
import path from 'path'

const configuration: webpack.Configuration = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  entry: './src/index.tsx',
  module: {},

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html')
    }),
    new webpack.ProvidePlugin({ React: 'react' }),
    new CleanWebpackPlugin()
  ]
}

export default configuration

webpack.dev.ts

import path from 'path'
import common from './webpack.common'
import merge from 'webpack-merge'
import { Configuration as WebpackConfiguration } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration
}

const devConfiguration: Configuration = {
  mode: 'development',
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    static: path.join(__dirname, 'public'),
    port: 3000,
    open: true,
    compress: true,
    historyApiFallback: true,
    hot: true
  },
  watchOptions: {
    ignored: /node_modules/
  },
  plugins: []
}

export default merge(common, devConfiguration)

webpack.prod.ts

import path from 'path'
import webpack from 'webpack'
import { merge } from 'webpack-merge'
import common from './webpack.common'

// plugin
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'

const prodConfiguration: webpack.Configuration = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [],
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          format: {
            comments: false
          }
        }
      })
    ]
  }
}

export default merge(common, prodConfiguration)

pakage.json

  "scripts": {
    "dev": "npx webpack serve --config webpack.dev.ts",
    "build:dev": "npx webpack --config webpack.dev.ts",
    "build:prod": "npx webpack --config webpack.prod.ts"
  },

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",  // 컴파일된 JavaScript 파일이 저장될 디렉토리
    "target": "ES5",  // 컴파일할 JavaScript의 버전 (ES5로 변환)
    "module": "ESNext",  // 사용할 모듈 시스템 (ESNext 모듈 사용)
    "jsx": "react-jsx",  // JSX 코드 변환 방법 (React 17 이상에서의 JSX 변환)
    "sourceMap": true,  // 소스 맵 파일 생성 여부 (디버깅을 위한 소스 맵 생성) // 공식사이트에서 꼭 추가하라고 함
    "noImplicitAny": true,  // 암묵적인 any 타입 사용 금지
    "allowSyntheticDefaultImports": true,  // 기본 내보내기 없는 모듈에서 기본 가져오기를 허용
    "lib": ["dom", "dom.iterable", "esnext"],  // 사용할 라이브러리 (DOM 및 ESNext 기능 포함)
    "allowJs": true,  // JavaScript 파일도 컴파일할 수 있도록 허용
    "skipLibCheck": true,  // 라이브러리 파일의 타입 검사를 건너뛰기
    "esModuleInterop": true,  // CommonJS와 ES 모듈 간의 상호 운용성을 활성화
    "strict": true,  // 모든 엄격한 타입 검사 옵션 활성화
    "forceConsistentCasingInFileNames": true,  // 파일 이름의 대소문자 구분을 강제
    "moduleResolution": "node",  // 모듈 해석 전략 (Node.js 방식 사용)
    "resolveJsonModule": true,  // JSON 파일을 모듈로 가져올 수 있도록 허용
    "isolatedModules": true  // 각 파일을 독립적으로 처리 (개별 파일 컴파일을 위한 설정)
  },
  "include": ["src"],  // 컴파일할 파일/디렉토리 (src 디렉토리 포함)
  "exclude": ["node_modules", "dist"],  // 컴파일에서 제외할 파일/디렉토리 (node_modules 및 dist 제외)
   
   // "webpack"설정 파일들을 "typescript"로 처리하기 위해 사용
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

.babelrc

npm install --save-dev @emotion/babel-plugin

나는 emotion을 사용하기에 따로 설치해주었다.

const presets = [
  '@babel/preset-react',
  [
    '@babel/preset-env',
    {
      modules: false,
      useBuiltIns: 'usage',
      corejs: 3
    }
  ],
  '@babel/preset-typescript'
]
const plugins = ['@emotion'] //emotion사용을 위한 플러그인

export default { presets, plugins }

🤔devServer가 타입스크립트 환경에서 정상적으로 작동하지 않을 때 해결 방법

타입스크립트 환경으로 webpack을 구성하면 위처럼 오류가 뜬다.

해결 방법은 여기에서 찾았다.

import { Configuration as WebpackConfiguration } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration
}

const devConfiguration: Configuration = {
 
  devServer: {
   //...
  },

}

export default merge(common, devConfiguration)

 

여기서 왜 아래와 같이 했을까?

import { Configuration as WebpackConfiguration } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'

두 타입의 이름이 같기 때문에 충돌이 나지 않기 위해 별칭을 사용한 것이다.

 

 

---

🔗참고링크

https://1-blue.github.io/posts/Webpack/

웹팩 ( Webpack + TypeScript + React )

https://velog.io/@2taeyoon/React%EC%97%90%EC%84%9C-Webpack-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0with.typescript

React에서 Webpack 사용하기(with.typescript)

 

 

 

---

🛠️ Webpack 번들 사이즈 최적화

1. CSS-In-JS에서는 mini-css-extract-plugin과 css-minimizer-webpack-plugin는 필요없다!

 mini-css-extract-plugin

이 플러그인은 CSS 파일을 별도로 추출하여 최적화된 CSS 파일로 만드는 데 사용됩니다.

- CSS-in-JS의 경우: CSS-in-JS 방식에서는 스타일이 JavaScript 파일 내에서 정의되고, 런타임에 동적으로 생성됩니다. 따라서 별도의 CSS 파일이 생성되지 않기 때문에 mini-css-extract-plugin이 필요하지 않습니다.

css-minimizer-webpack-plugin

이 플러그인은 CSS 파일을 압축하고 최적화하는 데 사용됩니다.

- CSS-in-JS의 경우: CSS-in-JS를 사용할 때는 최종적으로 생성되는 CSS 파일이 없으므로, 이 플러그인을 사용할 필요가 없습니다. CSS-in-JS 라이브러리들은 프로덕션 빌드 시 자동으로 스타일을 최적화하고 불필요한 스타일을 제거합니다.

 

 

그럼 어떻게 번들 사이즈를 줄일 수 있을까?

현재 위처럼 경고가 뜨고, 700kb 가량, 6.5초 정도의 시간이 소요되고 있다.

 

나는 TerserPlugin을 사용했다.

🤔 terser-webpack-plugin

terser-webpack-plugin은 Webpack에서 JavaScript 코드를 압축하는 데 사용되는 플러그인입니다. 

uglifyjs-webpack-plugin와 비슷한 기능을 하지만, uglifyjs-webpack-plugin보다 더 나은 결과물을 생성하며, 속도도 더 빠릅니다.

 

또한 uglifyjs-webpack-plugin은 webpack 5에서 지원이 되지 않습니다.

 

Webpack 설정 파일에서 terser-webpack-plugin을 import하고, optimization 속성 안에서 사용할 수 있습니다.

아래는 terser-webpack-plugin의 간단한 예시입니다.

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // ...기타 설정
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 콘솔 로그 제거
          },
          format: {
            comments: false, // 주석 제거
          },
        },
      }),
    ],
  },
};

 

 예시에서 minimize 속성은 Webpack이 번들링된 JavaScript 코드를 압축할지 여부를 설정합니다. minimizer 속성에는 Webpack이 사용할 압축 플러그인의 리스트를 설정합니다.

 

여기에서는 terser-webpack-plugin을 사용하고 있습니다. terserOptions 속성은 terser-webpack-plugin이 사용할 Terser 옵션을 설정합니다.

 

위 예시에서는 compress 옵션으로 콘솔 로그를 제거하도록 설정했습니다. 또한 format 옵션으로 주석을 제거하도록 설정했습니다.

 

위를 통해서 아래와 같이 이점을 얻어냈다.

330kb로 줄었고, 빌드 시간도 3초가량을 줄어들었다.

 

🚨중요

공식사이트에서는 webapck 5 부터 terser은 내장된다고 합니다.

 

하지만 옵션을 사용자 정의하기 위해서는 플러그인을 설치해서 설정해야합니다.

 

저는 JSDOC을 많이 사용했기 때문에 이 주석들이 모두 빌드되었고, 그로 인해 파일 크기와 빌드시간이 늘어났습니다.

왜냐하면 terser 내부에서는 기본적으로 주석을 포함해서 빌드하기 때문입니다.

 

2. terser-webpack-plugin 설치
    - TerserPlugin은 JavaScript 코드를 최적화하고 압축하는 데 사용되는 Webpack 플러그인입니다.
    - 기본적으로 Webpack 4 이상에서는 [기본적으로 내장](https://webpack.js.org/plugins/terser-webpack-plugin/)되어있습니다.
    - 하지만 저는 `옵션을 사용자 정의`하기 위해 플러그인을 설치했습니다.
    - 저는 `JSDOC` 사용과 코드 설명을 하기위해 코드에 주석이 많이 존재하고 있습니다.`(기본 값은 !가 붙은 JSDOC만 제거하지않음)`
    - 이를 제거하기 위해 플러그인을 설치하고 제거해주었습니다.
  
### 📖terser-webpack-plugin 관련 자료

1.[ output의 comments 기본 값](https://github.com/terser/terser?tab=readme-ov-file#format-options)
```
comments (default "some") -- by default it keeps JSDoc-style comments that contain "@license", "@copyright", "@preserve" or start with !, pass true or "all" to preserve all comments, false to omit comments in the output, a regular expression string (e.g. /^!/) or a function.
주석(기본값 "일부") - 기본적으로 "@라이센스", "@저작권", "@보존"이 포함되거나 !로 시작하는 JSDoc 스타일 주석을 유지하며, 모든 주석을 보존하려면 참 또는 "모두"를, 출력에서 주석을 생략하려면 거짓, 정규식 문자열(예: /^!/) 또는 함수를 전달합니다.
```
2.[ Webpack 사이트 terser](https://webpack.js.org/plugins/terser-webpack-plugin/)


하지만 해당 부분은 안해도 별차이가 없게돼서 안했습니당!