웹 애플리케이션 개발 시 파일의 크기는 매우 중요한 요소입니다. 파일 크기가 작을수록 페이지 로딩 속도가 향상되고, 사용자 경험도 향상됩니다. 이를 위해 웹팩(Webpack)을 사용하여 파일을 압축하는 방법을 알아보겠습니다.

웹팩 설정 구성하기

웹팩을 사용하여 파일을 압축하기 위해서는 웹팩 설정 파일을 구성해야 합니다. webpack.config.js 파일을 생성하고 다음과 같은 내용을 작성합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: true,
  },
};

위 예시 코드에서는 entry로 웹 애플리케이션의 진입점인 index.js 파일을 지정하고, output으로 압축된 파일이 저장될 위치와 이름을 설정합니다. optimization 속성을 사용하여 파일을 압축하도록 설정합니다.

웹팩 빌드하기

웹팩 설정이 완료되었으면 명령어를 사용하여 웹팩을 실행하여 파일을 압축합니다. package.json 파일의 scripts 항목에 다음과 같은 빌드 스크립트를 추가합니다.

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

위 예시 코드에서는 build 스크립트를 추가하였으며, 이를 실행하면 웹팩이 webpack.config.js 파일을 기반으로 웹 애플리케이션을 빌드합니다.

$ npm run build

빌드가 완료되면 dist 폴더에 bundle.js 파일로 압축된 결과물이 생성됩니다.

결론

Webpack을 이용하여 파일을 압축하는 방법에 대해 알아보았습니다. 파일 압축은 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 중요한 역할을 합니다. 위의 예시 코드를 참고하여 웹팩을 설정하고 파일을 압축해보세요.