웹팩이 포함된 번들 애플리케이션 - AWS SDK for JavaScript
웹팩 설치웹팩을 구성합니다.웹팩을 실행합니다.웹팩 번들을 사용하세요.Node.js 번들

AWS SDK for JavaScript V3 API 참조 안내서는 AWS SDK for JavaScript 버전 3 (V3) 의 모든 API 작업을 자세히 설명합니다.

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

웹팩이 포함된 번들 애플리케이션

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

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

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

웹팩 설치

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

npm install --save-dev webpack

webpack과 함께 자동으로 설치되는 파일 및 디렉터리 경로 작업을 위해 path 모듈을 사용하려면 Node.js path-browserify 패키지를 설치해야 할 수도 있습니다.

npm install --save-dev path-browserify

웹팩을 구성합니다.

기본적으로 Webpack은 프로젝트의 루트 webpack.config.js 디렉터리에 이름이 지정된 JavaScript 파일을 검색합니다. 이 파일은 구성 옵션을 지정합니다. 다음은 WebPack 버전 5.0.0 webpack.config.js 이상의 구성 파일 예제입니다.

참고

Webpack 구성 요구 사항은 설치하는 Webpack 버전에 따라 다릅니다. 자세한 내용은 Webpack documentation을 참조하세요.

// 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'
  },
   // Enable WebPack to use the 'path' package.
   resolve:{
  fallback: { path: require.resolve("path-browserify")}
  }
  /**
  * In Webpack version v2.0.0 and earlier, you must tell 
  * webpack how to use "json-loader" to load 'json' files.
  * To do this Enter 'npm --save-dev install json-loader' at the 
  * command line to install the "json-loader' package, and include the 
  * following entry in your webpack.config.js.
  * module: {
    rules: [{test: /\.json$/, use: use: "json-loader"}]
  }
  **/
};

이 예에서는 browser.js가 진입점으로 지정됩니다. 이 진입점은 webpack이 가져온 모듈 검색을 시작하는 데 사용하는 파일입니다. 출력의 파일 이름은 bundle.js로 지정합니다. 이 출력 파일에는 응용 프로그램을 실행하는 데 필요한 모든 내용이 포함됩니다. JavaScript 진입점에 지정된 코드가 SDK for JavaScript 등의 다른 모듈을 가져오거나 요구하는 경우 구성에서 해당 코드를 지정하지 않아도 해당 코드가 번들로 제공됩니다.

웹팩을 실행합니다.

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/client-iam": "^3.32.0",
    "@aws-sdk/client-s3": "^3.32.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

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

npm run build

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

웹팩 번들을 사용하세요.

브라우저 스크립트에서 번들을 사용하려면 다음 예와 같이 <script> 태그를 사용해 번들을 포함하면 됩니다.

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

Node.js 번들

webpack을 사용하면 구성에서 node를 대상으로 지정하여 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, "browser.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",
   // Enable WebPack to use the 'path' package.
   resolve:{
  fallback: { path: require.resolve("path-browserify")}
   /**
   * In Webpack version v2.0.0 and earlier, you must tell 
   * webpack how to use "json-loader" to load 'json' files.
   * To do this Enter 'npm --save-dev install json-loader' at the 
   * command line to install the "json-loader' package, and include the 
   * following entry in your webpack.config.js.
   module: {
    rules: [{test: /\.json$/, use: use: "json-loader"}]
  }
  **/
};