

 Das [AWS SDK für JavaScript V3-API-Referenzhandbuch](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) beschreibt detailliert alle API-Operationen für die AWS SDK für JavaScript Version 3 (V3). 

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Bündeln Sie Anwendungen mit Webpack
<a name="webpack"></a>

Die Verwendung von Codemodulen durch Webanwendungen in Browserskripten oder Node.js erzeugt Abhängigkeiten. Diese Codemodule können eigene Abhängigkeiten haben, was zu einer Sammlung von miteinander verbundenen Modulen führt, die Ihre Anwendung benötigt, um zu funktionieren. Um Abhängigkeiten zu verwalten, können Sie einen Modul-Bundler wie `webpack` verwenden.

Der `webpack` Modul-Bundler analysiert Ihren Anwendungscode und sucht nach `import` `require` ODER-Anweisungen, um Bundles zu erstellen, die alle Ressourcen enthalten, die Ihre Anwendung benötigt. Auf diese Weise können die Ressourcen einfach über eine Webseite bereitgestellt werden. Das SDK für JavaScript kann `webpack` als eine der Abhängigkeiten in das Ausgabepaket aufgenommen werden.

Weitere Informationen zu `webpack` finden Sie im [Webpack-Modul-Bundler](https://webpack.github.io/) unter. GitHub

## Installieren Sie das Webpack
<a name="webpack-installing"></a>

Um den `webpack` Modul-Bundler zu installieren, müssen Sie zuerst npm, den Paketmanager Node.js, installiert haben. Geben Sie den folgenden Befehl ein, um die `webpack` CLI und das JavaScript Modul zu installieren.

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

Um das `path` Modul für die Arbeit mit Datei- und Verzeichnispfaden zu verwenden, das automatisch mit Webpack installiert wird, müssen Sie möglicherweise das `path-browserify` Paket Node.js installieren. 

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

## Webpack konfigurieren
<a name="webpack-configuring"></a>

Standardmäßig sucht Webpack nach einer JavaScript Datei mit dem Namen `webpack.config.js` im Stammverzeichnis Ihres Projekts. Diese Datei enthält Ihre Konfigurationsoptionen. Das Folgende ist ein Beispiel für eine `webpack.config.js` Konfigurationsdatei für WebPack Version 5.0.0 und höher.

**Anmerkung**  
Die Webpack-Konfigurationsanforderungen variieren je nach der Version von Webpack, die Sie installieren. Weitere Informationen finden Sie in der [Webpack-Dokumentation](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"}]
  }
  **/
};
```

In diesem Beispiel `browser.js` wird als *Einstiegspunkt* angegeben. Der *Einstiegspunkt* wird von der Datei `webpack` verwendet, um mit der Suche nach importierten Modulen zu beginnen. Der Name für die Ausgabedatei ist als `bundle.js` angegeben. Diese Ausgabedatei enthält alles, was JavaScript die Anwendung zum Ausführen benötigt. Wenn der im Einstiegspunkt angegebene Code andere Module importiert oder benötigt, z. B. das SDK für JavaScript, wird dieser Code gebündelt, ohne dass er in der Konfiguration angegeben werden muss.

## Führen Sie Webpack aus
<a name="webpack-running"></a>

Um eine zu verwendende Anwendung zu erstellen`webpack`, fügen Sie dem `scripts` Objekt in Ihrer `package.json` Datei Folgendes hinzu.

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

Im Folgenden finden Sie eine `package.json` Beispieldatei, die das Hinzufügen demonstriert`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"
  }
}
```

Geben Sie den folgenden Befehl ein, um Ihre Anwendung zu erstellen.

```
npm run build
```

Der `webpack` Modul-Bundler generiert dann die JavaScript Datei, die Sie im Stammverzeichnis Ihres Projekts angegeben haben.

## Verwenden Sie das Webpack-Bundle
<a name="webpack-using-bundle"></a>

Um das Bundle in einem Browser-Skript zu verwenden, können Sie das Bundle mithilfe eines `<script>` Tags integrieren, wie im folgenden Beispiel gezeigt.

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

## Paket für Node.js
<a name="webpack-nodejs-bundles"></a>

Sie können `webpack` es verwenden, um Bundles zu generieren, die in Node.js ausgeführt werden, indem Sie es `node` als Ziel in der Konfiguration angeben.

```
target: "node"
```

Dies ist nützlich, wenn eine Node.js-Anwendung in einer Umgebung ausgeführt wird, in der Speicherplatz begrenzt ist. Hier sehen Sie ein Beispiel für eine `webpack.config.js`-Konfiguration mit der Angabe von Node.js als Ausgabeziel.

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