React

CRA없이 Webpack(웹팩) + Babel(바벨) 기본 설정하기

NHyun 2024. 7. 29. 19:38

이번에 과제를 진행하며 리액트의 초기 개발환경 설정을 하게 되었다. 항상 프로젝트를 시작하며 CRA나 Vite만 사용을 해서 처음부터 구축을 해보는 좋은 경험을 하게 되었다. 다음은 웹팩과 바벨 설정에 대한 단계이다.

1. 프로젝트 초기화

npm init -y

새로운 프로젝트를 초기화하기 위해 터미널에 다음과 같이 npm init -y를 통해 package.json 파일을 생성해주었다.

 

2. Webpack과 babel 및 필요 패키지 설치

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader

각 패키지들에 대해 간단하게 설명하자면

 

webpack : 모듈 번들러이다. 여러 개의 JavaScript파일과 기타 리소스(CSS,이미지)등을 하나의 파일로 번들링해준다.

webpack-cli : webpack을 터미널에서 사용 가능하게 해준다.
webpack-dev-server : 개발 서버이다. 코드를 변경 시에 자동으로 브라우저를 새로고침 해주며, 핫 모듈 교체(HMR)를 지원한다.
html-webpack-plugin : 빌드 된 JavaScript파일을 자동으로 HTML 파일에 자동으로 포함시켜준다.

babel-loader: Webpack이 Babel을 사용하여 자바스크립트 파일을 변환할 수 있도록 합니다.

@babel/core: Babel의 핵심 기능을 제공하며, 코드 변환의 중심 역할을 한다.

@babel/preset-env: 최신 자바스크립트 문법을 ES5로 변환하여 브라우저 호환성을 유지한다.

@babel/preset-react: JSX와 최신 React 문법을 변환한다.

css-loader : CSS파일을 JavaScript 모듈로 변환하는 로더이다. CSS파일을 import하여 JavaScript에서 사용가능하게 한다.
style-loader : 변환된 CSS를 <style> 태그로 HTML의 <Head> 태그 내에 넣는 기능을 한다.

 

3. 프로젝트 구조 설정

Project
├── public
│   └── index.html
├── src
│   └── index.js
├── .babelrc
├── package.json
└── webpack.config.js

 

프로젝트의 루트에 `.babelrc` , `webpack.config.js` 파일을 생성해준다.
다음과 같이 프로젝트의 기본구조를 설정했다. 

 

4. Webpack 및 babel 설정

// webpack.config.js

const path = require('path');  // Node.js의 path 모듈을 불러와 경로 관련 작업을 쉽게 한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');  // HTML 파일을 생성하고, 빌드된 JS 파일을 HTML에 자동으로 포함시켜주는 플러그인

module.exports = {
  entry: './src/index.js',  // 애플리케이션의 진입점(entry point)을 설정한다. 여기서부터 의존성 트리를 만들어 나간다.
  output: {
    path: path.resolve(__dirname, 'dist'),  // 빌드된 파일이 생성될 경로를 설정한다. 절대 경로를 사용해야 합니다.
    filename: 'bundle.js',  // 빌드된 파일의 이름을 설정한다.
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,  // JS 또는 JSX 파일에 대해 이 로더를 사용한다.
        exclude: /node_modules/,  // node_modules 폴더는 제외한다.
        use: 'babel-loader',  // Babel 로더를 사용하여 JS/JSX 파일을 트랜스파일링한다.
      },
      {
        test: /\.css$/,  // CSS 파일에 대해 이 로더를 사용
        use: ['style-loader', 'css-loader'],  // CSS 파일을 해석하고, style 태그로 삽입한다.
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],  // import 문에서 확장자를 생략할 수 있도록 설정한다.
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',  // 빌드된 파일을 포함할 HTML 템플릿 파일을 지정한다.
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),  // 개발 서버에서 제공할 파일 경로를 설정한다.
    compress: true,  // 모든 항목에 대해 gzip 압축을 활성화한다. gzip 압축을 통해 성능을 향상시킨다.
    port: 9000,  // 개발 서버가 실행될 포트를 설정한다. 꼭 9000번 포트가 아니여도 상관없다.
    hot: true,  // 모듈의 변경을 감지하여 새로고침 없이 변경 사항을 반영한다.
  },
};

 

// .babelrc

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


다음과 같이 설정을 마친 후

 

5.React 설치 및 dev 설정

npm i react react-dom

React와 dom을 설치해준다.

개발서버를 띄우기 위해서 package.json에 다음과 같이 스크립트를 추가해준다.

 "scripts": {
    "dev": "webpack serve --mode development"
  }

 

이 후 프로젝트를 진행하면 된다.