O AWS SDK para JavaScript v2 chegou ao fim do suporte. Recomendamos migrar para o [AWS SDK para JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Para ver detalhes e informações sobre como migrar, consulte este [anúncio](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

# Empacotamento de aplicativos com o Webpack
<a name="webpack"></a>

Os aplicativos web nos scripts do navegador ou o uso pelo Node.js dos módulos do código criam dependências. Esses módulos de código podem ter dependências próprias, o que resulta em uma coleção de módulos interligados que seu aplicativo exige para funcionar. Para gerenciar dependências, você pode usar um agrupador de módulos, como Webpack.

O agrupador de módulos Webpack analisa o código do seu aplicativo, procurando por instruções `import` ou `require`, para criar pacotes que contenham todos os ativos de que o seu aplicativo precisa para que os ativos sejam facilmente apresentados em uma página da web. O SDK para JavaScript pode ser incluído no Webpack como uma das dependências para incluir no pacote de saída.

Para obter mais informações sobre o Webpack, consulte o módulo do [agrupador de módulos Webpack](https://webpack.github.io/) no GitHub.

## Instalar o Webpack
<a name="webpack-installing"></a>

Para instalar o agrupador de módulos Webpack, primeiro você deve instalar o npm, o gerenciador de pacotes do Node.js. Digite o comando a seguir para instalar a CLI do Webpack e o módulo do JavaScript.

```
npm install webpack
```

Pode ser necessário também instalar um plugin do Webpack que permita o carregamento de arquivos JSON. Digite o comando a seguir para instalar o plug-in do carregador JSON.

```
npm install json-loader
```

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

Por padrão, o Webpack busca por um arquivo JavaScript chamado `webpack.config.js` no diretório raiz do projeto. Esse arquivo especifica as opções de configuração. Eis um exemplo de um arquivo de configuração do `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'
  },
  module: {
    /**
      * Tell webpack how to load 'json' files. 
      * When webpack encounters a 'require()' statement
      * where a 'json' file is being imported, it will use
      * the json-loader.  
      */
    loaders: [
      {
        test: /\.json$/, 
        loaders: ['json']
      }
    ]
  }
}
```

Neste exemplo, `browser.js` é especificado como ponto de entrada. O *ponto de entrada* é o arquivo que o webpack usa para iniciar a pesquisa por módulos importados. O nome do arquivo da saída é especificado como `bundle.js`. Esse arquivo de saída conterá tudo do JavaScript de que o aplicativo precisa para ser executado. Se o código especificado no ponto de entrada importar ou exigir outros módulos, como o SDK para JavaScript, esse código será incluído sem a necessidade de especificá-lo na configuração.

A configuração do plugin `json-loader` que foi instalado anteriormente especifica ao Webpack como importar arquivos JSON. Por padrão, o Webpack só é compatível com JavaScript, mas usa carregadores para adicionar suporte à importação de outros tipos de arquivo. Como o SDK para JavaScript faz amplo uso de arquivos JSON, o Webpack lançará um erro ao gerar o pacote se o `json-loader` não estiver incluído.

## Executar o Webpack
<a name="webpack-running"></a>

Para criar um aplicativo para usar o Webpack, adicione o seguinte ao objeto `scripts` no seu arquivo `package.json`.

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

Veja a seguir um exemplo de `package.json` que demonstra a adição do 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": "^2.6.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "webpack": "^1.13.2"
  }
}
```

Para criar seu aplicativo, digite o comando a seguir.

```
npm run build
```

O agrupador de módulos Webpack gera o arquivo JavaScript que você especificou no diretório raiz do projeto.

## Usar o pacote Webpack
<a name="webpack-using-bundle"></a>

Para usar o pacote no script de um navegador, você pode incorporar o pacote usando uma tag `<script>`, conforme mostrado no exemplo a seguir.

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

## Importar serviços individuais
<a name="webpack-importing-services"></a>

Um dos benefícios do Webpack é que ele analisa as dependências do seu código e agrupa somente o código de que seu aplicativo precisa. Se você estiver usando o SDK para JavaScript, agrupar apenas as partes do SDK de fato usadas pelo seu aplicativo pode reduzir consideravelmente o tamanho da saída do Webpack.

Considere o seguinte exemplo do código usado para criar um objeto de serviço do Amazon S3.

```
// Import the AWS SDK
var AWS = require('aws-sdk');

// Set credentials and Region
// This can also be done directly on the service client
AWS.config.update({region: 'us-west-1', credentials: {{{YOUR_CREDENTIALS}}}});

var s3 = new AWS.S3({apiVersion: '2006-03-01'});
```

A função `require()` especifica o SDK inteiro. Um pacote do Webpack gerado com esse código incluiria todo o SDK, mas nem todo o SDK é necessário quando somente a classe de cliente Amazon S3 é usada. O tamanho do pacote seria substancialmente menor se apenas a parte do SDK de que você precisa para o serviço do Amazon S3 fosse incluída. Nem a configuração exige todo o SDK, pois você pode definir os dados de configuração no objeto de serviço do Amazon S3.

Aqui está o mesmo código quando inclui somente a parte do Amazon S3 do SDK.

```
// Import the Amazon S3 service client
var S3 = require('aws-sdk/clients/s3');
 
// Set credentials and Region
var s3 = new S3({
    apiVersion: '2006-03-01',
    region: 'us-west-1', 
    credentials: {{{YOUR_CREDENTIALS}}}
  });
```

## Empacotamento para o Node.js
<a name="webpack-nodejs-bundles"></a>

Você pode usar o Webpack para gerar pacotes executados no Node.js ao especificá-los como destino na configuração.

```
target: "node"
```

Isso é útil ao executar um aplicativo do Node.js em um ambiente no qual o espaço em disco é limitado. Aqui está um exemplo de configuração do `webpack.config.js` com o Node.js especificado como o destino de saída.

```
// Import path for resolving file paths
var path = require('path');
module.exports = {
  // Specify the entry point for our app
  entry: [
    path.join(__dirname, 'node.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",
  module: {
    /**
      * Tell webpack how to load JSON files.
      * When webpack encounters a 'require()' statement
      * where a JSON file is being imported, it will use
      * the json-loader
      */
    loaders: [
      {
        test: /\.json$/, 
        loaders: ['json']
      }
    ]
  }
}
```