[환경설정] 바닐라 자바스크립트 + Webpack + Babel + Jest 설정하기

바닐라 자바스크립트로 프론트엔드 개발을 시작하기에 앞서

웹팩과 바벨을 사용하여 개발 환경을 설정하려 합니다.

웹팩과 바벨은 다음과 같은 역할 등을 수행할 수 있습니다.

 

Webpack

의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러

 

웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로

별도의 모듈 로더가 필요 없습니다.

또한 여러 개의 자바스크립트 파일을 하나로 번들링함으로써

HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을

로드해야 하는 번거로움도 사라질 수 있습니다. 

 

Babel

최신 사양의 소스 코드를 ES5 사양의 소스 코드로 변환(transpiling)

 

바벨은 ES6 이상의 자바스크립트 소스 코드를 트랜스파일링하여

그보다 낮은 사양의 소스 코드만 해석 가능한 (예를 들어 IE라던가) 브라우저에서도 돌아가게 해줍니다. 

 

Jest

자바스크립트 테스팅 프레임워크

 

Jest는 페이스북에서 만든 자바스크립트 테스트 프레임워크입니다.

TDD 개발을 하고자 한다면 Jest를 설치해줍니다.

Jest

---

0. 프로젝트 생성

프로젝트 루트 경로에 index.html 파일을 생성합니다.

그리고 같은 위치에 src 폴더를 생성하고 그 안에 index.js파일을 생성합니다.

 

그리고 터미널에서 다음과 같은 명령어로 package.json을 생성해줍니다.

npm init

 

---

1. npm 패키지 설치

npm을 사용해 웹팩 등의 필요한 패키지들을 설치합니다.

# Webpack
npm install -D webpack webpack-cli
npm install -D webpack-dev-server
npm install -D style-loader css-loader
npm install -D html-webpack-plugin
npm install -D clean-webpack-plugin

# Babel
npm install -D @babel/core @babel/preset-env babel-loader

# Jest
npm install -D jest babel-jest

 

---

2. package.json

package.json의 scripts 부분의 명령어들을 변경합니다.

{
  // ...
  "scripts": {
    "test": "jest",
    "start": "webpack serve",
    "build": "webpack -w"
  },
  // ...
}

앞서 설치한 webpack-dev-server 패키지는 웹팩 설정을 적용한 결과물을 만들어

localhost 서버에 띄워주며 핫 리로딩 등의 기능도 제공합니다.

예전에는 webpack-dev-server 명령어로 실행했으나

현재는(webpack-cli 4버전 이상) webpack serve로 변경됐습니다. 

 

---

3. webpack.config.js

프로젝트 루트 경로에 webpack.config.js를 생성하고 아래처럼 작성합니다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: './dist',
  },
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: {
      keep: /\.git/,
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ]
}

여기서 dist 폴더는 웹팩으로부터 번들링된 결과물이 저장되는 곳입니다.

 

---

4. .babelrc

프로젝트 루트 경로에 .babelrc 파일을 생성하고 다음과 같이 작성합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}

 

---

5. 실행 

프로젝트가 잘 돌아가는지 터미널에 명령어를 치고 확인해봅니다.

# 개발 모드
npm start

# build
npm run build

npm start를 했다면 localhost:8080에서 돌아가는지 확인합니다.