Webpack과 애플리케이션 번들링 - AWS SDK for JavaScript
Webpack 설치Webpack 구성Webpack 실행Webpack 번들 사용개별 서비스 가져오기Node.js에 대한 번들링

곧 AWS SDK for JavaScript(v2)에 대한 지원이 종료될 예정임을 알려드립니다. AWS SDK for JavaScript v3로 마이그레이션하실 것을 권장합니다. 마이그레이션 날짜, 추가 세부 정보 및 방법에 대한 자세한 내용은 링크된 공지 사항을 참조하세요.

Webpack과 애플리케이션 번들링

코드 모듈에서 브라우저 스크립트 또는 Node.js로 작성된 웹 애플리케이션을 사용하면 종속성이 생성됩니다. 이러한 코드 모듈에는 자체 종속성이 있을 수 있어 애플리케이션 작동에 필요한 상호 연결된 모듈 모음이 생깁니다. 종속성을 관리하려면 webpack과 같은 모듈 번들러를 사용할 수 있습니다.

webpack 모듈 번들러는 애플리케이션 코드를 구문 분석하여 import 또는 require 명령문을 검색해 애플리케이션에 필요한 모든 자산이 포함된 번들을 생성합니다. 따라서 웹 페이지를 통해 자산을 쉽게 제공할 수 있습니다. SDK for JavaScript는 출력 번들에 포함할 종속성 중 하나로 webpack에 포함될 수 있습니다.

webpack에 대한 자세한 내용은 GitHub의 webpack 모듈 번들러를​ 참조하세요.

Webpack 설치

webpack 모듈 번들러를 설치하려면 먼저 Node.js 패키지 관리자인 npm이 설치되어 있어야 합니다. 다음 명령을 입력하여 webpack CLI 및 JavaScript 모듈을 설치합니다.

npm install webpack

또한 JSON 파일을 로드할 수 있도록 하려면 webpack 플러그인을 설치해야 할 수도 있습니다. 다음 명령을 입력하여 JSON 로더 플러그인을 설치합니다.

npm install json-loader

Webpack 구성

기본적으로 webpack은 프로젝트의 루트 디렉터리에서 JavaScript 파일인 webpack.config.js를 검색합니다. 이 파일은 구성 옵션을 지정합니다. 다음은 webpack.config.js 구성 파일의 예입니다.

// Import path for resolving file paths
var path = require('path');
module.exports = {
  // Specify the entry point for our app.
  entry: [
    path.join(__dirname, 'browser.js')
  ],
  // Specify the output file containing our bundled code
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    /**
      * Tell webpack how to load 'json' files. 
      * When webpack encounters a 'require()' statement
      * where a 'json' file is being imported, it will use
      * the json-loader.  
      */
    loaders: [
      {
        test: /\.json$/, 
        loaders: ['json']
      }
    ]
  }
}

이 예제에서는 browser.js가 진입점으로 지정됩니다. 이 진입점은 webpack이 가져온 모듈 검색을 시작하기 위해 사용하는 파일입니다. 출력의 파일 이름은 bundle.js로 지정합니다. 출력 파일에는 애플리케이션에서 실행해야 하는 JavaScript가 모두 포함되어 있습니다. 진입점에 지정된 코드가 SDK for JavaScript와 같은 다른 모듈을 가져오거나 필요로 하는 경우 해당 코드는 구성에서 이를 지정할 필요 없이 번들링됩니다.

앞서 설치된 json-loader 플러그인의 구성은 webpack에서 JSON 파일을 가져오는 방식을 지정합니다. 기본적으로 webpack은 JavaScript만 지원하지만 로더를 사용하여 다른 파일 유형을 가져오기 위한 지원을 추가합니다. SDK for JavaScript에서는 JSON 파일의 사용을 확장하기 때문에 json-loader가 포함되지 않은 경우 번들 생성 시 webpack에서 오류가 발생합니다.

Webpack 실행

webpack을 사용하기 위한 애플리케이션을 빌드하려면 package.json 파일의 scripts 객체에 다음을 추가합니다.

"build": "webpack"

다음은 webpack 추가를 보여주는 예제 package.json입니다.

{
  "name": "aws-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.6.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "webpack": "^1.13.2"
  }
}

애플리케이션을 빌드하려면 다음 명령을 입력합니다.

npm run build

webpack 모듈 번들러가 프로젝트의 루트 디렉터리에 지정한 JavaScript 파일을 생성합니다.

Webpack 번들 사용

브라우저 스크립트에서 번들을 사용하기 위해 다음 예제에서처럼 <script> 태그를 사용해 번들을 포함할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>AWS SDK with webpack</title>
    </head> 
    <body>
        <div id="list"></div>
        <script src="bundle.js"></script>
    </body>
</html>

개별 서비스 가져오기

webpack 사용의 이점 중 하나는 코드의 종속성을 구문 분석해 애플리케이션에 필요한 코드만 번들링한다는 점입니다. SDK for JavaScript를 사용하는 경우에는 애플리케이션에서 실제 사용하는 SDK의 부분만 번들링해 webpack 출력 크기를 크게 줄일 수 있습니다.

Amazon S3 서비스 객체를 생성하는 데 사용되는 다음 코드 예제를 사용하면 좋습니다.

// Import the AWS SDK
var AWS = require('aws-sdk');

// Set credentials and Region
// This can also be done directly on the service client
AWS.config.update({region: 'us-west-1', credentials: {YOUR_CREDENTIALS}});

var s3 = new AWS.S3({apiVersion: '2006-03-01'});

require() 함수는 전체 SDK를 지정합니다. 이 코드를 사용하여 생성된 webpack 번들은 전체 SDK를 포함할 수 있지만 Amazon S3 클라이언트 클래스만 사용되는 경우에는 전체 SDK가 필요하지 않습니다. Amazon S3 서비스에 필요한 SDK의 일부만 포함하면 번들의 크기를 상당히 줄일 수 있습니다. Amazon S3 서비스 객체에 대한 구성 데이터를 설정할 수 있기 때문에 구성 설정에 전체 SDK가 필요하지 않습니다.

SDK의 Amazon S3 부분만 포함한 경우 코드는 다음과 같습니다.

// Import the Amazon S3 service client
var S3 = require('aws-sdk/clients/s3');
 
// Set credentials and Region
var s3 = new S3({
    apiVersion: '2006-03-01',
    region: 'us-west-1', 
    credentials: {YOUR_CREDENTIALS}
  });

Node.js에 대한 번들링

webpack을 사용하면 구성에서 Node.js를 대상으로 지정하여 Node.js에서 실행되는 번들을 생성할 수 있습니다.

target: "node"

이는 디스크 공간이 제한된 환경에서 Node.js 애플리케이션을 실행하는 경우 유용합니다. 다음은 출력 대상으로 Node.js가 지정된 webpack.config.js 구성의 예입니다.

// Import path for resolving file paths
var path = require('path');
module.exports = {
  // Specify the entry point for our app
  entry: [
    path.join(__dirname, 'node.js')
  ],
  // Specify the output file containing our bundled code
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  // Let webpack know to generate a Node.js bundle
  target: "node",
  module: {
    /**
      * Tell webpack how to load JSON files.
      * When webpack encounters a 'require()' statement
      * where a JSON file is being imported, it will use
      * the json-loader
      */
    loaders: [
      {
        test: /\.json$/, 
        loaders: ['json']
      }
    ]
  }
}