Webpack과 Babel을 이용한 React 개발 환경 구성

모듈이란?

자바스크립트로 개발을 하다보면 코드의 재사용이나 유지보수 측면에서 파일을 여러개로 분리 해서 개발 하곤 하는데 이렇게 분리된 파일을 모듈 이라고 합니다.

자바스크립트 코드를 모듈로 분리하게 되면 이러한 모듈을 필요한 어떤곳에서든 재사용이 가능하기 때문에 자주 사용하는 코드같은 경우에는 모듈로 분리해서 개발합니다

이렇게 웹 애플리케이션이 완성이 되면 웹서버라는 공간에 배포를 하게 되고 사용자가 브라우저를 통해 웹 사이트에 접근을 하게 되면 브라우저는 사용자들에게 UI를 보여주기 위해 웹서버에 HTML,CSS,JAVASCRIPT같은 자원(resource)를 요청 하게 됩니다 . 웹서버는 준비된 자원을 브라우저에게 응답함으로써 사용자들은 ui를 볼수있게 되는것

하지만 개발 편의성을 위해 모듈을 계속 분리 하다 보면 브라우저에서 서버에 요청하는 갯수가 많아지고 이러한 네트워크 비용의 증가는 페이지 로딩시간을 길어지게 함으로써 사용자 경험에 좋지않은 영향을 발생시킬 수 있습니다

그러면 개발 편리를 위해 모듈로 분리해서 개발을 하고 또한 페이지 로딩 시간을 줄일 수 있는 방법이 없을까?

그방법은 , 브라우저에서 서버로 요청하는 http 갯수를 줄이는 것입니다.

즉 개발을 할때는 모듈로 나누어서 개발을 하고 웹서버에 배포하기 전에 이러한 모듈을 하나의 파일로 묶어서 배포하는것 그러면 그만큼 서버로 요청하는 갯수가 줄어들기 때문에 사용자 경험을 향상 시킬 수 있다.

이렇게 여러개의 모듈을 하나로 모듈로 묶는 작업을 번들링 이라 하며 여러개의 파일을 하나로 묶어주는 도구를 모듈 번들러 라고 합니다

모듈 번들러의 종류중 웹팩에 대해 알아 보고자 합니다

 

웹팩이란?

여러개의 파일을 하나로 묶어주는 모듈 번들러라고 할수 있습니다 주로 자바스크립트 파일을 위한 모듈번들러 이지만 플러그인을 포함하는 경우 자바스크립트 뿐만 아니라  HTML,CSS,IMG와 같은 자원들도 변환할 수 있습니다.

 

 

1)Webpack 설치하기

npm i -D webpack webpack-cli webpack-dev-server

(D 옵션 : devDependencies에 패키지가 추가됨. 배포할 프로젝트를 빌드할 때 devDependencies에 추가된 패키지들은 포함되지 않는다.)

• webpack-dev-server: 웹팩 개발 서버를 구동할 수 있게 하고(npm run dev), 실시간 리로딩을 지원
• webpack-cli : webpack을 더 쉽게 사용할 수 있도록 다양한 명령어를 제공하는 패키지

 

2)loader 설치하기

javascript 파일이 아닌 html, css images, 폰트 등의 파일들도 웹팩이 해석할 수 있도록 변환해 주는 로더들을 설치해 주자.

Loader: js, json 파일 외의 html, css, images 폰트 등의 파일을 모듈로 불러와 번들링 하기 위해 사용.

npm i -D babel-loader style-loader css-loader

• babel-loader: JSX 및 ES6+ 문법을 변환.
• style-loader: 변환된 CSS파일을
• css-loader: .css 파일을 읽기위한 로더

 

 

3)plug in 설치

웹팩의 기본적인 동작에 추가적인 기능들을 제공하기 위해 플러그인을 설치해 주자.

템플릿을 지정하거나 favicon을 설정할 수 있습니다.

npm i -D html-webpack-plugin

 

 

https://webpack.js.org/

webpack

 

3)바벨(Babel)

React에서는 JSX문법을 사용하는데 자바스크립트와는 조금 다르다. 그래서 JSX를 실행하기 위해서는 babel이 필요하다.바벨은 자바스크립트 es6 문법을 es5로 변환해주는 트렌스파일러(transpiler) 입니다. 이것을 통해 React를 일반 브라우저에서 실행시킬 수 있습니다. 

 

npm i -D @babel/core @babel/preset-react @babel/preset-env

- babel/core : 기본적인 바벨로 최신 문법으로 변환해주는 역할을 한다.

- babel/preset-env : 여러 환경에 맞게 JavaScript를 동작하게 해 준다.

- babel/preset-react : 리액트를 위한 플러그인 모음

- babel-loader : 바벨(babel)과 웹팩(webpack)을 연결해준다.

 

4)바벨(Babel) 설정

webpack.config.js에서 loader 설정 시 함께 설정하기

webpack.config.js에 babel 설정을 추가해준다.

 

 

const HtmlWebpackPlugin = require('html-webpack-plugin');

const port = process.env.PORT || 3000;

module.exports = {
  // 개발환경
  mode: 'development',

  // 애플리케이션 시작 경로
  entry: './src/index.js',

  // 번들된 파일 경로
  output: {
    filename: 'bundle.[hash].js',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },

      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],

  // 개발 서버 설정
  devServer: {
    host: 'localhost',
    port: port,
    open: true, // open page when start
  },
};

- module.exports = {} : 선언된 객체를 모듈로 출력

-mode: 웹팩의 실행 모드를 설정
none - 모드 설정 안함, development - 개발 모드, production - 배포 모드

- entry : 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점 이자 자바스크립트 파일 경로 입니다. 웹팩은 entry 를 통해서 모듈을 로딩하고 하나의 파일로 묶습니다.

- output :  웹팩에서 entry 로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치

- module : 모듈 설정

- plugins : 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성입니다.

loader 는 파일을 해석하고 변환하는 과정에 관여하고, plugin 은 결과물의 형태를 바꾸는 역할을 합니다.

-Loader:웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있습니다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성입니다.