将应用程序与 webpack 捆绑在一起 - Amazon SDK for JavaScript
安装 webpack配置 webpack运行 webpack使用 webpack 捆绑包Node.js 的捆绑包
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

Amazon SDK for JavaScript V3 API 参考指南详细描述了 Amazon SDK for JavaScript 版本 3 (V3) 的所有API操作。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

将应用程序与 webpack 捆绑在一起

浏览器脚本或 Node.js 中使用代码模块的 Web 应用程序会创建依赖关系。这些代码模块可能会具有自身的依赖关系，导致您的应用程序需要一组互连的模块才能正常工作。要管理依赖关系，您可以使用 webpack 等模块捆绑程序。

webpack 模块捆绑程序解析您的应用程序代码，搜索 import 或 require 语句，创建包含您应用程序所需的全部资产的捆绑。这样可以轻松地通过网页提供资产服务。的 SDK JavaScript 可以webpack作为依赖项之一包含在输出包中。

有关更多信息webpack，请参阅上的 webpack 模块捆绑器。 GitHub

安装 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 文件。此文件指定您的配置选项。以下是 5.0.0 及更高 WebPack 版本的webpack.config.js配置文件示例。

注意

Webpack 配置要求因您安装的 Webpack 版本而异。有关更多信息，请参阅 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"}]
  }
  **/
};

在本示例中，指定 browser.js 为入口点。入口点 是 webpack 开始搜索导入的模块所用的文件。输出的文件名指定为 bundle.js。此输出文件将包含应用程序运行所需的所有内容。 JavaScript 如果入口点中指定的代码导入或需要其他模块（例如的 SDK） 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 捆绑包

要在浏览器脚本中使用捆绑，您可以使用 <script> 标签整合捆绑，如下例中所示。

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

Node.js 的捆绑包

您可以通过在配置中将 node 指定为目标，使用 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, "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"}]
  }
  **/
};