webpack 설정

Bundler

❓ 번들러는 여러 개의 파일 및 종속성을 하나로 묶어서 애플리케이션을 로드하고 실행할 수 있게 해주는 도구다. 주로 웹 개발에서 사용되며, 프로젝트에 포함된 여러 모듈 및 리소스를 효율적으로 관리하고 최적화할 수 있게끔 한다. 대표적인 번들러로는 Webpack, Parcel, 그리고 Rollup 등이 있다.

✅ Webpack 사용해서 jsx 번들링하기

1. Webpack 및 관련 로더 설치

npm install webpack webpack-cli webpack-dev-server babel-loader --save-dev

2. Babel 설정 및 관련 패키지 설치

npm install @babel/core @babel/preset-react --save-dev

3. Webpack 설정 파일 만들기 : 프로젝트 루트에 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: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

💡 위 설정에서 entry는 애플리케이션의 진입점을 나타내고, output은 번들링된 결과물의 경로와 이름을 설정한다. module.rules에서는 Babel을 사용하기 위한 로더 설정을 추가한다.

4. JSX 파일 생성 및 프로젝트 구조 설정

• 프젝에 따라 알맞게 세팅.

5. Webpack 실행

npx webpack --mode development

또는 package.json 파일의 스크립트에 추가하고 npm run build와 같이 실행가능하다.

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

✅ dist 폴더 내에 생성된 bundle.js 파일은 JSX를 일반 JavaScript로 변환하고 번들링한 결과물이다. 이 파일을 HTML에서 로드하여 React 애플리케이션을 실행할 수 있다.