21세기 프론트엔드 (1) 시작하기에서 npm과 webpack을 설치하고 기본적인 개발 환경을 세팅하는 작업을 했습니다. 이번 글에서는 webpack을 더 확장해서 자바스크립트 뿐만 아니라 CSS도 함께 번들링할 수 있도록 만들고, 더불어 개발환경에서 ES6를 사용하기 위해 Babel을 설치해보겠습니다. 여기까지 "무슨 말인지 하나도 모르겠다!"하셔도 괜찮습니다.

CSS 번들링하기

이전 글에서 index.js와 jQuery를 번들링해서 index.html에서는 bundle.js만을 불러들이도록 했는데요, 여기에 CSS 파일도 추가해보려 합니다.

/* index.css */
h1 {
  color: #ff0000;
}

옛날 방법대로라면 index.html의 <head>태그 안에 <style rel="stylesheet" href="index.css" />와 같은 코드를 넣었겠지만, 이건 깔끔하지 않습니다. webpack을 활용해봅시다. 먼저 두 개의 로더를 설치해주세요.

$ npm install css-loader style-loader --save-dev

둘 다 개발 환경에서만 사용할 것이기 때문에 개발 의존성으로 설치했습니다. 로더는 각 모듈을 특정 규칙에 따라 가공해줍니다. 로더를 설치했으니 webpack.config.js를 수정해주세요.

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    compress: true,
    port: 9000
  },
  module: {
    rules: [ 
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

이제 정말 간단하게 CSS 파일을 번들링할 수 있습니다. 로더에 style-loader와 css-loader를 추가함으로써 webpack이 외부 CSS 파일을 읽고, 이것을 HTML 파일의 <head>태그에 <style>태그를 넣는 방식으로 CSS를 번들링할 수 있게 되었습니다. index.js 파일을 수정해보세요.

// index.js
var $ = require('jquery');
var style = require('./index.css');
console.log($('h1').text());

이제 npm run build를 통해 webpack을 실행하면 index.html에 CSS가 적용된 것을 볼 수 있습니다. (npm run watch를 해두셨다면 index.js를 저장하자마자 자동으로 webpack이 실행됩니다.)

Babel 사용하기

Babel은 트랜스파일러(Transpiler)입니다. 트랜스파일러는 ES6로 작성된 자바스크립트 코드를 브라우저와 호환되는 버전으로 바꿔줍니다. (브라우저가 자바스크립트 버전을 바로 따라가지 못하는 경우가 있기 때문에 트랜스파일러가 필요합니다.) 즉, 개발 환경에서 ES6의 기능들을 사용해도 괜찮다는 뜻입니다. 과거에는 CoffeeScript가 주로 사용됐습니다. 만약 ES6가 무엇인지 잘 모르시는 분들은 ES6시대의 JavaScript 또는 지금 바로 시작하는 ES6를 읽어보세요.

npm을 통해 Bable 패키지를 설치해야 합니다.

$ npm install babel-core babel-preset-env babel-loader --save-dev

babel-core와 babel-preset-env, babel-loader 세가지 패키지를 설치했습니다. babel-core와 babel-preset-env은 Babel의 핵심부이며, 자바스크립트의 어떤 기능을 트랜스파일할지 정의해놓은 패키지입니다. babel-loader는 앞서 설치한 css-loader와 style-loader 같은 로더입니다. webpack.config.js에서 로더를 추가해봅시다.

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }, 
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

이제 webpack이 실행될 때마다 babel-loader를 거치게 됩니다. index.js를 수정해서 ES6의 기능이 제대로 동작하는지 보죠. import는 require를 대체하는 ES6 문법입니다. 또한 let은 var와 달리 블록스코프를 갖는 타입으로 역시 ES6에서 추가되었습니다. 그리고 템플릿 문자열도 사용할 수 있습니다.

// index.js
import $ from 'jquery';
import './index.css';

let name = 'Park'

console.log(`My name is ${name}`);
console.log($('#title').text());

좋습니다! 이제 배포 코드를 만드는 일만 남았네요. 이 부분은 다음 글에서 설명하도록 하겠습니다.

21세기 프론트엔드 (2) webpack 확장하기

CSS 번들링하기

Babel 사용하기