[Panduan Referensi API AWS SDK untuk JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) menjelaskan secara rinci semua operasi API untuk AWS SDK untuk JavaScript versi 3 (V3). 

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Bundel aplikasi dengan webpack
<a name="webpack"></a>

Penggunaan modul kode oleh aplikasi web dalam skrip browser atau Node.js menciptakan dependensi. Modul kode ini dapat memiliki dependensi sendiri, menghasilkan kumpulan modul yang saling berhubungan yang dibutuhkan aplikasi Anda untuk berfungsi. Untuk mengelola dependensi, Anda dapat menggunakan bundler modul seperti. `webpack`

`webpack`Modul bundler mem-parsing kode aplikasi Anda, mencari `import` atau `require` pernyataan, untuk membuat bundel yang berisi semua aset yang dibutuhkan aplikasi Anda. Ini agar aset dapat dengan mudah dilayani melalui halaman web. SDK for JavaScript dapat dimasukkan `webpack` sebagai salah satu dependensi untuk disertakan dalam bundel keluaran.

Untuk informasi selengkapnya`webpack`, lihat [bundler modul webpack](https://webpack.github.io/) aktif. GitHub

## Instal webpack
<a name="webpack-installing"></a>

Untuk menginstal bundler `webpack` modul, Anda harus menginstal npm, manajer paket Node.js terlebih dahulu. Ketik perintah berikut untuk menginstal `webpack` CLI dan JavaScript modul.

```
npm install --save-dev webpack
```

Untuk menggunakan `path` modul untuk bekerja dengan jalur file dan direktori, yang diinstal secara otomatis dengan webpack, Anda mungkin perlu menginstal `path-browserify` paket Node.js. 

```
npm install --save-dev path-browserify
```

## Konfigurasikan webpack
<a name="webpack-configuring"></a>

Secara default, Webpack mencari JavaScript file bernama `webpack.config.js` di direktori root proyek Anda. File ini menentukan opsi konfigurasi Anda. Berikut ini adalah contoh file `webpack.config.js` konfigurasi untuk WebPack versi 5.0.0 dan yang lebih baru.

**catatan**  
Persyaratan konfigurasi webpack bervariasi tergantung pada versi Webpack yang Anda instal. Untuk informasi selengkapnya, lihat [dokumentasi Webpack](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"}]
  }
  **/
};
```

Dalam contoh ini, `browser.js` ditentukan sebagai *titik masuk*. *Titik masuk* adalah file yang `webpack` digunakan untuk mulai mencari modul yang diimpor. Nama file output ditentukan sebagai`bundle.js`. File output ini akan berisi semua aplikasi JavaScript yang perlu dijalankan. Jika kode yang ditentukan di titik masuk mengimpor atau memerlukan modul lain, seperti SDK for JavaScript, kode tersebut dibundel tanpa perlu menentukannya dalam konfigurasi.

## Jalankan webpack
<a name="webpack-running"></a>

Untuk membangun aplikasi yang akan digunakan`webpack`, tambahkan berikut ini ke `scripts` objek dalam `package.json` file Anda.

```
"build": "webpack"
```

Berikut ini adalah contoh `package.json` file yang menunjukkan penambahan`webpack`.

```
{
  "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"
  }
}
```

Untuk membangun aplikasi Anda, masukkan perintah berikut.

```
npm run build
```

`webpack`Modul bundler kemudian menghasilkan JavaScript file yang Anda tentukan di direktori root proyek Anda.

## Gunakan bundel webpack
<a name="webpack-using-bundle"></a>

Untuk menggunakan bundel dalam skrip browser, Anda dapat menggabungkan bundel menggunakan `<script>` tag, seperti yang ditunjukkan pada contoh berikut.

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

## Bundel untuk Node.js
<a name="webpack-nodejs-bundles"></a>

Anda dapat menggunakan `webpack` untuk menghasilkan bundel yang berjalan di Node.js dengan menentukan `node` sebagai target dalam konfigurasi.

```
target: "node"
```

Ini berguna saat menjalankan aplikasi Node.js di lingkungan di mana ruang disk terbatas. Berikut adalah contoh `webpack.config.js` konfigurasi dengan Node.js ditentukan sebagai target output.

```
// 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"}]
  }
  **/
};
```