티스토리 뷰

21세기 프론트엔드 목차

  1. 개발 환경 세팅하기
  2. webpack 확장하기
  3. 배포하기

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-loadercss-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로 작성된 자바스크립트 코드를 브라우저와 호환되는 버전으로 바꿔준다. (브라우저가 자바스크립트 버전을 바로 따라가지 못하는 경우가 있기 때문에 트랜스파일러가 필요하다. 특히 IE.) 즉, 개발 환경에서 ES6의 기능들을 사용해도 괜찮다는 뜻이다. 과거에는 CoffeeScript를 주로 사용했다. 만약 ES6가 무엇인지 잘 모른다면 ES6시대의 JavaScript 또는 지금 바로 시작하는 ES6를 읽어보자.

먼저 npm을 통해 Bable 패키지를 설치해야 한다.

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

babel-corebabel-preset-env, babel-loader 세가지 패키지를 설치했다. babel-corebabel-preset-env은 Babel의 핵심부이며, 자바스크립트의 어떤 기능을 트랜스파일할지 정의해놓은 패키지다. babel-loader는 앞서 설치한 css-loaderstyle-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의 기능이 제대로 동작하는지 보자.

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

let name = 'Park'

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

importrequire를 대체하는 ES6 문법이다. 또한 letvar와 달리 블록스코프를 갖는 타입으로 역시 ES6에서 추가되었다. 그리고 템플릿 문자열도 사용할 수 있다. 이제 배포 코드를 만드는 일만 남았다.

댓글
댓글쓰기 폼