Grunt, Webpack을 적용한 빌드 단위 개발하기

Webpack이란?

서버 사이드에서 Node.js로 개발해본 개발자라면 require 구문을 통한 모듈 단위의 개발에 익숙할 것이다. Webpack은 서버 사이드에서만 사용되던 모듈 단위 개발을 클라이언트 사이드에서도 가능하게 해주는 빌드 도구이다. 이번 글에서는 Grunt 빌드 환경에서 Webpack을 적용하는 방법을 설명하고자 한다.

모듈의 예

JavaScript에서 모듈을 작성하는 방식은 AMD, CommonJS 2가지로 구분된다. 다음은 CommonJS 방식으로 작성한 모듈의 예이다. 아래와 같이 hello 이름을 갖는 모듈을 작성하고 hello.js로 저장한다.

var hello = 'hello';
module.exports = hello;

앞서 생성한 hello 모듈을 사용하는 world.js를 작성한다.

var hello = require('./hello');
console.log(hello);

package.js 작성

프로젝트 루트에 package.json을 아래와 같이 작성한다.

{
  "name": "sample-app",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~1.0.1",
    "webpack": "~1.13.2",
    "webpack-dev-server": "~1.15.1",
    "grunt-webpack": "~1.0.14"
  }
}

• Grunt에 Webpack을 적용하기 위해서는 webpack, webpack-dev-server, grunt-webpack 모듈을 프로젝트에 설치해야 한다.

앞서 정의한 모듈을 설치한다. 프로젝트 루트에 node_modules 디렉토리가 생성된다.

$ npm install

Gruntfile.js 작성

프로젝트 루트에 Gruntfile.js을 아래와 같이 작성한다.

module.exports = function(grunt) {

  grunt.initConfig({
    webpack: {
      sample: {
        entry: "./src/js/app.js",
        output: {
          path: "build/js",
          filename: "app.js"
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-webpack');
}

• /src/js/app.js를 프로젝트의 시작점으로 지정하여 사용된 모듈 간의 종속 관계를 분석하여 하나의 /build/js/app.js를 생성한다. 이를 통해 개발자는 Node.js에서와 동일한 방법으로 프론트엔드 영역에서도 모듈 개념을 적용할 수 있다.

Grunt 작업 실행

앞서 정의한 작업을 아래와 같이 실행한다. 후속 작업으로 uglify를 실행하면 운영 환경에 맞게 축약된 파일을 얻을 수 있다.

$ grunt webpack:sample

써드파티 라이브러리 모듈 적용

Webpack을 도입하면 NPM과의 조합을 통해 써드파티 라이브러리 또한 모듈 적용이 가능하다. 전통적으로 프론트엔드에서 써드파티 라이브러리를 로드하는 방법은 아래와 같다.

<script src="/assets/js/jquery.js"></script>

Webpack을 도입하면 HTML 상에 명시할 필요 없이 JavaScript 만으로 아래와 같은 모듈화가 가능하다. 우선 package.js에 사용할 써드파티 라이브러리를 명시해야 한다.

{
  ...
  "devDependencies": {
    ...
    "jquery":"~3.1.0"
  }
}

npm install을 실행하여 라이브러리 의존성 설치까지 완료하면 아래와 같이 Webpack이 제공하는 모듈 방식의 라이브러리 사용이 가능하다.

window.$ = window.jQuery = require('jquery');

모듈에 별명 지어주기

때때로 특정 모듈에 명시적으로 별명일 지어줄 필요가 있다. 이 경우 resolve.alias 설정을 해주면 된다. jquery 모듈을 예로 들면 아래와 같다.

webpack: {
    dev: {
        ...
        resolve: {
            alias: {
                'jq': require('path').join(__dirname, 'node_modules/jquery/dist/jquery.min.js')
            }
        }
    }
}

위 설정은 jquery 모듈에 jq라는 별명을 지어준다. JavaScript에서는 아래와 같이 모듈을 로드할 수 있다.

window.$ = window.jQuery = require('jq');

관련 글

• Grunt, JavaScript 프로젝트에 적용하기