设置和使用

使用webpack的最常见方法是通过CLI。默认情况下，运行命令会执行，这是webpack设置的配置文件。

webpack的核心概念是bundle。 bundle是一个简单的模块集合，我们定义它们如何分离的边界。 在这个项目中，我们有两个包：

• app 为我们的应用程序特定的客户端逻辑
• 第三方库的vendor

在webpack中，通过入口点配置bundle。 Webpack逐个遍历每个入口点。 它通过遍历每个模块的引用映射一个依赖关系图。 它遇到的所有依赖关系然后打包到该捆绑包中。
通过NPM安装的软件包使用CommonJS的模块化方式引入。 在JavaScript文件中，它将如下所示：

我们将使用这些字符串值作为我们传递给webpack的模块名称。

让我们来看看我们在示例应用中定义的入口点：

app的入口点，./src/index.ts，是我们Angular 2应用程序的基本文件。 如果我们正确地定义了每个模块的依赖关系，这些引用应该连接我们应用程序的所有部分。vendor 的入口点是我们的应用程序代码正常工作所需的模块列表。 即使这些文件被我们的应用程序包中的某个模块引用，我们也希望将这些资源分离在第三方代码中。

输出配置

• Webpack在绑定我们的模块并输出它们时转换代码。 我们想要有一种方法来连接由webpack生成的代码和我们编写的代码。
• 服务器路由可以以许多不同的方式配置。 我们可能想要一些配置webpack的方式来考虑我们的服务器路由设置。

所有这些配置选项都由config的output属性处理。 让我们看看我们如何设置我们的配置来解决这些问题：

要将捆绑文件保存在不同的文件夹中，我们使用path属性。这里，path告诉webpack所有的输出文件必须保存到path.resolve(__ dirname，'dist')。在我们的例子中，我们将每个bundle保存到一个单独的文件中。此文件的名称由filename属性指定。