Webpack 공부하면서 알아야되는 용어들

Webpack?

Webpack은 모던 자바스크립트 애플리케이션을 위한 강력한 모듈 번들러이다.

웹 애플리케이션의 다양한 자원들(JavaScript, StyleSheet, Image 등)을 하나의 파일 또는 여러 파일로 번들링하는 데 사용한다.

Webpack의 핵심 원칙은 모든 것을 module로 취급한다는 것이다. 즉 CSS, 이미지, 폰트 등도 자바스크립트 모듈처럼 처리된다.

 

Webpack 설정 방법

웹팩이 모듈 번들러인거는 알겠는데 그래서 웹팩이 뭐하는 거야?라고 하면

우리가 웹 개발하면서 만나는 package.json파일을 설정하는 거라고 생각하면 됩니다.

npm init을 실행하여 package.json파일을 생성한 후 웹팩과 관련된 패키지를 설치하면 됩니다.

 

 

1. 프로젝트 초기화

mkdir my-webpack-project
cd my-webpack-project
npm init -y  # '-y'는 모든 프롬프트에 대해 기본값을 자동으로 선택하도록 합니다.

 

2. 웹팩 및 필요한 패키지 설치

npm install webpack webpack-cli --save-dev

 

3. 웹팩 설정 파일 생성

프로젝트 루트에 `webpack.config.js` 파일을 생성합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // 엔트리 포인트
  output: {
    filename: 'bundle.js', // 번들링된 파일 이름
    path: path.resolve(__dirname, 'dist') // 출력 경로
  }
};

 

4. `package.json`에 npm 스크립트 추가

`package.json` 파일에서, "scripts" 섹션에 아래와 같이 웹팩을 실행할 스크립트를 추가합니다.

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack --watch"
}

 

5. 로더 및 플러그인 설치(선택 사항)

CSS와 JavaScript ES6+ 코드를 변환하려면 아래와 같이 로더와 플러그인을 설치하고 설정할 수 있다.

 

- Babel(JS 변환)

npm install babel-loader @babel/core @babel/preset-env --save-dev

- CSS 로더

npm install css-loader style-loader --save-dev

설치 후, `webpack.config.js`에 아래와 같이 해당 로더들을 추가합니다.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  // ...
};

 

6. 소스 코드 작성 및 번들링

`src/index.js` 및 다른 필요한 파일들을 작성한 후, 아래의 명령어로 웹팩을 실행하면 `dist` 폴더에 번들링된 결과가 생성됩니다.

npm run build

 

이러한 기본 설정을 통해 웹팩을 사용하여 프로젝트를 시작할 수 있다. 웹팩은 매우 유연하여 다양한 플러그인과 로더를 통해 확장할 수 있기 때문에, 프로젝트의 요구 사항에 따라 설정을 계속 조정하고 확장해 나가는 것이 좋다.