and so on

웹팩에 대하여

kim_genius_ 2023. 11. 7. 15:23

 

 

 

 

때로 github을 뜯어볼 때 webpack이라는 단어를 본다. 그리고 개발을 하다보면 종종 웹팩을 보긴하는데 이게 뭔가 싶었다.

웹과 팩이니까 웹에 관련된 뭔가를 포장하는건가... 싶은데 좀 더 자세히 알아보고자 한다.

 

웹팩이란?

웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.

 

위키백과의 정의인데 좀 더 풀어서 설명을 하자면

웹 개발에서는 다양한 라이브러리와 프레임워크를 사용하여 애플리케이션을 만든다. 개발을 더 효과적으로 관리하고 코드의 재사용성을 높이기 위해서임. 그러나 이런 다양한 도구들을 효과적으로 관리하려면 여러 파일로 나누어 작성하고, 이를 번들로 묶어주는 작업이 필요하다.(=모듈 번들링 이라고 함)

예를들면 우리도 이사를 할 때 이사박스에 별걸 다 묶어서 짐 싸지 않는가? 왜 그렇게 할까? 그게 편하니까. 또 관리하기 쉬우니까.

 

웹팩의 등장

웹팩(Webpack)은 이러한 모듈 번들링 도구 중 하나로, 자바스크립트, CSS, 이미지 등 다양한 자원들을 하나의 파일로 번들링하여 웹 애플리케이션을 효과적으로 구성할 수 있도록 도와준다. 웹팩은 의존성 관리, 모듈 로딩, 코드 최적화 등을 통해 개발 프로세스를 간소화하고 성능을 향상시킬 수 있음.

 

 

웹팩의 기능

1.모듈 번들링

2.로더(Loader)

3.플러그인(Plugin)

4.개발 서버(DevServer)

 

1. 모듈 번들링: 코드의 효율적인 구성과 유지보수성 향상

프로젝트 내의 다양한 모듈들을 의존성에 따라 하나로 준다.

// src/moduleA.js
export const hello = 'Hello';

// src/moduleB.js
import { hello } from './moduleA';
console.log(hello + ' World!');

 

2.로더(Loader):다양한 파일 형식의 처리

로더는 웹팩이 다양한 유형의 파일을 이해하고 처리할 수 있게 도와주는 도구.

예를 들어, CSS 파일을 로딩하기 위해 'css-loader'를 사용하거나, 이미지를 처리하기 위해 'file-loader'를 사용할 수 있다.

// webpack.config.js
//CSS 파일과 이미지 파일을 로딩하기 위해 각각 'style-loader'와 'file-loader'를 사용하고 있다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }]}};

 

3. 플러그인(Plugin): 번들링된 결과물에 추가 작업 수행

플러그인은 웹팩의 기능을 확장하여 번들링된 결과물에 대한 다양한 작업을 수행할 수 있게 해준다.

예를 들어, 'UglifyJSPlugin'은 자바스크립트 코드를 압축하여 번들 크기를 최소화하는 데 사용될 수 있음.

내가 만약 번들링한 결과물에서 console.log 들을 다 지우고 싶다면? 아래처럼!

// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ... 기타 설정 ...

  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true // 콘솔 로그 제거
        }
      }})]};

 

4. 개발 서버(DevServer): 실시간 변경 사항 반영

개발 서버는 개발 중인 애플리케이션을 실시간으로 감시하고 변경 사항을 자동으로 반영해주는 환경을 제공한다.

이를 통해 개발자는 코드를 수정하고 저장할 때마다 수동으로 새로고침하지 않아도 변경 사항이 반영되어 빠르게 개발할 수 있음.

또한, 개발 서버는 라이브 서버와는 별도로 동작함.

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: './dist',
    port: 8080
  }
};

//추가적인 devserver option!

devServer: {
  open: true //개발 서버를 실행할 때 기본 브라우저를 자동으로 열어줌.
  hot: true //코드를 수정하면 브라우저를 새로고침하지 않고 모듈을 교체하여 빠르게 변경 사항을 확인할 수 있게 해줌.
  proxy: {'/api': 'http://localhost:3000'} //개발 서버에서 특정 경로로 요청이 들어오면 다른 서버로 전달하는데 사용
}

 

 

전체적으로 사용하는 예시

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};