Webpack のインストール Webpack の設定 Webpack の実行 Webpack バンドルの使用個々のサービスをインポートする Node.js 用のバンドル

Webpack によるアプリケーションのバンドル

ブラウザスクリプト内のウェブアプリケーションまたは Node.js がコードモジュールを使用すると、依存関係が生じます。これらのコードモジュールは独自の依存関係を持つことができ、結果として、アプリケーションが機能するために必要な、相互接続されたモジュールの集まりができます。依存関係を管理するには、webpack などのモジュールバンドラーを使用できます。

Webpack モジュールバンドラーはアプリケーションコードを解析して、import または require ステートメントを検索し、アプリケーションに必要なすべてのアセットを含むバンドルを作成します。これにより、アセットがウェブページから簡単に提供されるようにできます。SDK for JavaScript は、出力バンドルに含める依存関係の 1 つとして webpack に含めることができます。

Webpack の詳細については、GitHub の Webpack モジュールバンドラーを参照してください。

Webpack のインストール

Webpack モジュールバンドラーをインストールするには、まず npm (Node.js パッケージマネージャー) がインストールされている必要があります。Webpack CLI および JavaScript モジュールをインストールするには、次のコマンドを入力します。


npm install webpack

必要に応じて、webpack プラグインをインストールします。これにより、JSON ファイルがロードできるようになります。JSON ローダープラグインをインストールするには、次のコマンドを入力します。


npm install json-loader

Webpack の設定

デフォルトで、webpack はプロジェクトのルートディレクトリにある webpack.config.js という名前の JavaScript ファイルを検索します。このファイルは、設定オプションを指定します。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']
      }
    ]
  }
}

この例では、エントリポイントとして browser.js が指定されます。エントリポイントは、インポートされたモジュールの検索を開始するために webpack が使用するファイルです。出力のファイル名は bundle.js として指定されます。この出力ファイルには、アプリケーションの実行に必要なすべての JavaScript が含まれています。エントリーポイントで指定されたコードが SDK for JavaScript などの他のモジュールをインポートまたは必要とする場合、そのコードは設定で指定しなくてもバンドルされます。

以前にインストールされた json-loader プラグインの設定は、JSON ファイルをインポートする方法を webpack に指定します。デフォルトでは、webpack は JavaScript のみをサポートしていますが、ローダーを使用して他のファイルタイプのインポートのサポートを追加します。SDK for JavaScript で JSON ファイルが広範囲に使用されているため、json-loader が含まれていない場合、webpack はバンドル生成時にエラーをスローします。

Webpack の実行

アプリケーションが Webpack を使用するように構築するには、scripts ファイル内の package.json オブジェクトに以下を追加します。


"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": "^2.6.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "webpack": "^1.13.2"
  }
}

アプリケーションを構築するには、次のコマンドを入力します。


npm run build

その後、Webpack モジュールバンドラーは、プロジェクトのルートディレクトリで指定した JavaScript ファイルを生成します。

Webpack バンドルの使用

ブラウザスクリプト内でバンドルを使用するには、次の例で示すように <script> タグを使用してバンドルを組み込むことができます。


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

個々のサービスをインポートする

Webpack の利点の 1 つは、コード内の依存関係を解析して、アプリケーションに必要なコードだけをバンドルすることです。SDK for JavaScript を使用している場合、アプリケーションで実際に使用されている SDK の部分のみをバンドルすることで、webpack の出力サイズをかなり小さくすることができます。

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'});

require() 関数は、SDK 全体を指定します。このコードで生成された webpack バンドルには完全な SDK が含まれますが、Amazon S3 クライアントクラスのみが使用される場合、完全な SDK は必要ありません。SDK のうち、Amazon S3 サービスに必要な部分だけが含まれている場合、バンドルのサイズはかなり小さくなります。Amazon S3 サービスオブジェクトで構成データを設定できるため、構成の設定する場合でも完全な SDK は必要ありません。

SDK の Amazon S3 部分のみが含まれている場合、同じコードは次のようになります。


// 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}
  });

Node.js 用のバンドル

設定のターゲットとして指定することで、webpack を使用して Node.js で実行されるバンドルを生成できます。


target: "node"

これは、ディスク容量に制限がある環境で Node.js アプリケーションを実行するときに役立ちます。出力ターゲットとして指定された Node.js を使用した 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, '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']
      }
    ]
  }
}

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Cross-Origin Resource Sharing (CORS)

のサービスを使用する