[AWS SDK for JavaScript V3 API リファレンスガイド](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)では、 AWS SDK for JavaScript バージョン3 (V3) のすべての API オペレーションについて詳しく説明します。
翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Webpack でアプリケーションをバンドルする
ブラウザスクリプトまたはNode.jsでWebアプリケーションでコードモジュールを使用すると、依存関係が作成されます。これらのコードモジュールは独自の依存関係を持つことができ、結果として、アプリケーションが機能するために必要な、相互接続されたモジュールの集まりができます。依存関係を管理するには、`webpack`などのモジュールバンドラーを使用できます。
`webpack`モジュールバンドラーはアプリケーションコードを解析して、`import` または `require` ステートメントを検索し、アプリケーションに必要なすべてのアセットを含むバンドルを作成します。これは、アセットを Web ページを介して簡単に提供できるようにするためです。SDK for JavaScript は、出力バンドルに含める依存関係の1つとして`webpack` に含めることができます。
`webpack`の詳細については、GitHub の [webpack module bundler](https://webpack.github.io/)（Webpack モジュールバンドラー）を参照してください。
## Webpackをインストールします
`webpack`モジュールバンドラーをインストールするには、まず npm (Node.js パッケージマネージャー) をインストールする必要があります。`webpack`CLI およびJavaScriptモジュールをインストールするには、次のコマンドを入力します。
```
npm install --save-dev webpack
```
ファイルとディレクトリパスを操作するためのモジュール`path`を使用するには、Webpack で自動的にインストールされる場合は、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/)（Webpack ドキュメント）を参照してください。
```
// 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"}]
}
**/
};
```
この例では、 *entry point*（エントリポイント）として`browser.js` が指定されます。*entry point*（エントリポイント）は、インポートされたモジュールの検索を開始するために使用するファイル`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 バンドルを使用する
ブラウザスクリプトでバンドルを使用するには、次の例で示すように `