[AWS SDK for JavaScript V3 API 참조 안내서](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)는 AWS SDK for JavaScript 버전 3(V3)의 모든 API 작업을 자세히 설명합니다.
기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# Webpack으로 애플리케이션 번들링
브라우저 스크립트 또는 Node.js에서 웹 애플리케이션이 코드 모듈을 사용하면 종속성이 생성됩니다. 이러한 코드 모듈에는 자체 종속성이 있을 수 있어 애플리케이션 작동에 필요한 상호 연결된 모듈 모음이 생깁니다. 종속성을 관리하려면 `webpack`과 같은 모듈 번들러를 사용하면 됩니다.
`webpack` 모듈 번들러는 애플리케이션 코드를 구문 분석하여 `import` 또는 `require` 문을 검색해 애플리케이션에 필요한 모든 자산이 포함된 번들을 생성합니다. 이렇게 하면 웹 페이지를 통해 자산을 쉽게 제공할 수 있습니다. SDK for JavaScript는 출력 번들에 포함할 종속성 중 하나로 `webpack`에 포함될 수 있습니다.
`webpack`에 관한 자세한 내용은 GitHub의 [webpack module bundler](https://webpack.github.io/)를 참조하세요.
## Webpack 설치
`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은 프로젝트의 루트 디렉터리에서 `webpack.config.js`라는 JavaScript 파일을 검색합니다. 이 파일은 구성 옵션을 지정합니다. 다음은 WebPack 버전 5.0.0 이상에 대한 `webpack.config.js` 구성 파일의 예입니다.
**참고**
Webpack 구성 요구 사항은 설치하는 Webpack 버전에 따라 다릅니다. 자세한 내용은 [Webpack documentation](https://webpack.js.org/configuration/)을 참조하세요.
```
// 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 실행
`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 파일을 생성합니다.
## Webpack 번들 사용
브라우저 스크립트에서 번들을 사용하려면 다음 예와 같이 `