webpack과 babel (zum 과제 직접만들어보기)

이수연·2023년 4월 4일

저는 이번에 zum에서 신입사원 과제로 나온 리스트를 보며 생각이 굉장히 많아졌습니다.
지금까지 저는 라이브러리로 나온 것들을 npm install 하고 세팅만 해왔었고, 이 라이브러리들의 구조가 어떤 식으로 되어있는지 깊이 공부하지 않았기 때문이죠. 따라서 직접 하나씩 만들어 가며 구조를 이해하기로 하였습니다. 아래는 줌에서 제시한 과제 리스트인데요. 하나씩 만들어 가며 이해하고 구현한 내용을 정리하도록 하겠습니다. 첫 번째 시리즈로 webpack, babel를 공부하고, 정리하며 구현한 내용을 소개하도록 하겠습니다.

BABEL

대부분의 브라우저가 ES6문법을 지원하지만, 매년 새롭게 도입되는 es6이상의 버전과 제안 단계에 있는 es 제안 사양은 브라우저에 따라 지원율이 제각각 입니다. 따라서 최신 사양의 ESMA script 사양을 사용하여 프로젝트를 진행하려면 최신사양으로 작성된 코드를 경우에 따라 구형 브라우저에도 동작하기 위한 개발환경을 구축하는것이 필요합니다. 이에 따라 바벨을 사용하는것이 매우 중요합니다.
그렇다면 바벨은 무엇일까요? 바벨의 정의는 아래와 같이 설명 드릴수 있습니다.

바벨(Babel)은 자바스크립트 코드 변환 도구로, ES6+ (ECMAScript 2015+) 코드를 ES5 이하 버전의 자바스크립트 코드로 변환해주는 역할을 합니다.

Babel 설치

npm init -y // package.json 세팅
npm install --save-dev @babel/core @babel/cli

바벨을 설치하면 아래와 같이 package.json에 세팅됩니다.

{
  "name": "challenge",
  "version": "1.0.0",
    "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4"
    }
}

빠르게 변화하는 esma script에 따라 babel, webpack도 빈번하게 업데이트를 합니다. 이때 npm install을 할경우 최신버전으로 설치되기 때문에 위버전과 동일하게 설치 하고 싶다면, @babel/core@7.21.0 이런식으로 설치해주면 됩니다.

두번째로 바벨 설치후 세팅해야 되는 부분은 @babel/present-env를 설치해야 됩니다. 이는 바벨과 함께 사용되어야 되는 바벨 플러그인을 모아둔것으로 바벨 프리셋 이라고도 불립니다. 타입스크립트라던지, 리액트와 같은것들을 예로 들수 있습니다.

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

설치가 완료 된다면, 루트 디렉토리에 .babel.rc 라는 폴더를 만들어 아래와 같이 세팅 해주어야 됩니다.

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

.babel.rc로 세팅이 아닌 babel.config.json로도 세팅할수 있습니다. 세팅 방법은 둘다 동일 하지만, 다른점이 있습니다. babel.rc는 바벨의 버전에 상관없이 세팅이 가능하지만 babel.config.json은 바벨 7.0 이후부터 사용가능하므로 이전 버전의 바벨을 사용하는 경우에는 .babelrc 파일을 사용해야 합니다.

babel-polyfill

es6 사양의 소스코드를 es5 사양의 소스코드로 트랜스파일링해도 브라우저가 지원하지 않는 코드가 남아 있을수 있습니다. 예를들어 es6에 새로 추가된 Promise,Object.assign,Array.from 등은 es5 사양으로 트랜스파일링 해도 es5 사양에 대체할 기능이 없기 때문에 그대로 남게 되는데요! 따라서 구형 브라우저에도 이와 같은 문법들을 사용하기위해 제공해주는 것이 babel-polyfill 입니다.

설치

npm install @babel/polyfill

실제 프로젝트에서 아래와 같이 import 하여 사용할수 있습니다.

WEBPACK

웹팩 설명에 앞서 번들러에 대해 설명 하겠습니다. 번들러라는 단어를 들으면 뭐가 떠오르시나요??
저는 꽃다발을 생각했는데요! 말그대로 하나로 묶어주는것을 의미 합니다. 웹팩은 자바스크립트,css,이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러 입니다. Webpack을 사용하면 의존 모듈이 하나로 번들링 되기 때문에,별도의 모듈 로더가 필요 없습니다. 이에따라 html에서 js파일 하나하나 script태그로 로드해야되는 번거러움도 사라지게 됩니다! 굉장히 고마운 친구죠??ㅎㅎ

Webpack 설치

npm install --save-dev webpack webpack-cli

웹팩이 모듈을 번들링 할때 Babel을 사용하여 ES6사양의 소스코드를 es5 사양의 코드로 트랜스파일 하도록 babel-loader를 설치 합니다.

npm install --save-dev babel-loader

설치가 완료되면 pacakage.json을 아래와 같이 수정해 줍니다.

  "scripts": {
    "start": "webpack serve --open --mode=development",
    "build": "webpack --mode=production",
  },

webpack에서 build할때 production모드로 세팅하는 이유는 배포할때 최적화된 코드를 생성할 수 있어서 배포 시 빠르고 안정적인 애플리케이션을 제공할 수 있기 때문입니다. 그리고 npm start할때는 개발 단계에서는 속도보다는 개발자가 코드를 쉽게 디버그할 수 있도록 도와주는 기능들이 포함되있는 development모드를 사용하게 됩니다.

webpack.config.js 설정파일 작성

const path = require("path");

// node js에서 내장되어 있는 path모듈을 불러오는 코드 입니다. 이 모듈을 사용할경우
파일 경로를 조작하거나 절대 경로를 구하는 등의 작업을 수행할 때 사용됩니다.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  
  //번들링된 js 파일의 이름과 저장될 경로를 지정

  
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  
  	// 웹팩에서 빌드한 결과물이 저장될 경로와 파일명을 설정하는 부분입니다. 
    // output 객체는 웹팩이 생성한 번들 파일(bundle file)의 경로와 파일명을 지정합니다. 
    //filename 속성은 번들 파일의 이름을 설정하고, path 속성은 번들 파일의 경로를 설정합니다.
    
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.jpg$/,
        use: ["file-loader"],
      },
    ],
  },
  // 웹팩에서 모듈을 번들링할 때 사용하는 로더(loader)를 설정하는 부분 입니다.
  // test에서 js는 js를 번들링, css는 css를 번들링, jpg는 jpg를 번들링 합니다.
  
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "common.css",
    }),
  ],
  // 웹팩에서 사용하는 플러그인(plugins)을 설정하는 부분 입니다.
  // HtmlWebpackPlugin은 HTML 파일을 생성하는 플러그인, 
  // MiniCssExtractPlugin은 CSS 파일을 추출하여 별도의 파일로 저장하는 플러그인 입니다.
  
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"),
      
      //현재 프로젝트 디렉터리에서 dist 디렉터리를 절대 경로로 지정한 것입니다.
      
    },
    port: 8080,
    
    //port 속성에는 개발 서버의 포트 번호를 지정하고 있습니다.
    //위 코드에서는 포트 번호로 8080을 사용하도록 설정되어 있습니다.
  },
};

//웹팩(Webpack)에서 사용하는 개발 서버(dev server)를 설정하는 부분 입니다.

각각에 해당하는 설명은 주석으로 대신 하였고, 로더와 플러그인은 아래에 설명 하겠습니다.

플러그인은 로더가 처리한 결과물에 대한 추가적인 작업을 수행하여 번들링 과정을 보완하고, 최적화하는 역할을 합니다. 플러그인은 웹팩의 기능을 확장하여 개발자가 더욱 쉽고 빠르게 웹팩을 사용할 수 있도록 도와줍니다. 로더는 웹팩이 모듈을 해석할 때, 특정한 파일들을 처리하는 역할을 합니다. 예를 들어, 자바스크립트 코드를 ES5로 변환하기 위해 babel-loader를 사용할 수 있습니다.

위와 같이 config.js를 설정하면 아래와 같이 dist 폴더내부의 index.html에 번들링되는것을 볼수 있습니다.