核心概念索引

在核心层面，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包器。当 webpack 处理您的应用程序时，它会在内部从一个或多个 入口点 构建一个 依赖图，然后将您的项目所需的所有模块组合成一个或多个 bundle（包），这些 bundle 是用于提供您内容的静态资源。

T> 点击 此处 了解更多关于 JavaScript 模块和 webpack 模块的信息。

自 4.0.0 版本起，webpack 不需要配置文件 即可打包您的项目。尽管如此，它仍然是 高度可配置的，以更好地满足您的需求。

要开始使用，您只需了解其 核心概念：

• 入口
• 输出
• loader
• 插件
• 模式
• 浏览器兼容性

本文档旨在对这些概念进行 高层次 概述，并提供指向特定概念的详细用例的链接。

为了更好地理解模块打包器背后的思想及其底层工作原理，请参阅以下资源：

• 手动打包一个应用程序
• 现场编写一个基础模块打包器
• 基础模块打包器的详细说明

入口

入口起点 指示 webpack 应该使用哪个模块来开始构建其内部 依赖图。webpack 将计算出该入口点直接或间接依赖的其他模块和库。

默认情况下，其值为 ./src/index.js，但您可以通过在 webpack 配置中设置 entry 属性 来指定一个不同（或多个）的入口点。例如：

webpack.config.js

export default {
  entry: "./path/to/my/entry/file.js",
};

T> 在没有配置文件的情况下运行 webpack 时，入口默认为 './src/index.js'。如果该文件不存在——即使您的 src/ 目录存在——webpack 将抛出：
ERROR in Entry module not found: Error: Can't resolve './src'

该错误显示 './src' 而不是 './src/index.js'，因为 webpack 首先解析目录，然后才尝试在其中查找默认的 index.js 文件。要使用不同的入口文件名，请添加一个如上例所示的 webpack.config.js 文件。

T> 在 入口起点 部分了解更多信息。

输出

output 属性告诉 webpack 在哪里输出它创建的 bundle，以及如何命名这些文件。对于主输出文件，它默认为 ./dist/main.js，对于任何其他生成的文件，默认为 ./dist 文件夹。

您可以通过在配置中指定一个 output 字段来配置此过程的这一部分：

webpack.config.js

import path from "node:path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js",
  },
};

在上面的示例中，我们使用 output.filename 和 output.path 属性来告诉 webpack 我们 bundle 的名称以及我们希望将其输出到的位置。如果您想知道顶部导入的 path 模块，它是用于操作文件路径的 Node.js 核心模块。

T> output 属性具有 更多可配置的特性。如果您想了解其背后的概念，可以在 输出部分 中阅读更多内容。

loader

默认情况下，webpack 只理解 JavaScript 和 JSON 文件。loader 允许 webpack 处理其他类型的文件，并将它们转换为应用程序可以消费并添加到依赖图中的有效 模块。

W> webpack 的一个具体特性是能够 import 任何类型的模块，例如 .css 文件，其他打包器或任务执行器可能不支持这一点。我们认为这种对语言的扩展是合理的，因为它允许开发人员构建更准确的依赖图。

在高层次上，loader 在您的 webpack 配置中具有两个属性：

1. test 属性标识应被转换的文件。
2. use 属性指示使用哪个 loader 进行转换。

webpack.config.js

import path from "node:path";

export default {
  output: {
    filename: "my-first-webpack.bundle.js",
  },
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
};

上面的配置为单个模块定义了 rules 属性，其中包含两个必需的属性：test 和 use。这告诉 webpack 编译器以下内容：

“嘿，webpack 编译器，当你在 require()/import 语句中遇到解析为 '.js' 文件的路径时，在将其添加到 bundle 之前，使用 babel-loader 对其进行转换。”

W> 重要的是要记住，在 webpack 配置中定义规则时，您是在 module.rules 下定义，而不是在 rules 下。为方便您起见，如果操作不正确，webpack 会给您警告。

W> 请记住，使用正则表达式匹配文件时，不能加引号。即 /\.txt$/ 与 '/\.txt$/' 或 "/\.txt$/" 不同。前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 webpack 匹配一个具有绝对路径 '.txt' 的单个文件；这可能不是您的意图。

您可以在 loader 部分 中查看包括 loader 在内的进一步定制信息。

插件

loader 用于转换某些类型的模块，而插件则可以用于执行更广泛的任务，例如 bundle 优化、资源管理和环境变量注入。

T> 查看 插件接口 以及如何使用它来扩展 webpack 的功能。

要使用插件，您需要 import 它并将其添加到 plugins 数组中。大多数插件可以通过选项进行定制。由于您可以出于不同目的在配置中多次使用同一个插件，因此您需要通过使用 new 运算符调用它来创建它的实例。

webpack.config.js

import HtmlWebpackPlugin from "html-webpack-plugin";
import webpack from "webpack"; // 访问内置插件

export default {
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

在上面的示例中，html-webpack-plugin 为您的应用程序生成一个 HTML 文件，并自动将所有生成的 bundle 注入此文件。

T> webpack 提供了许多内置插件！查看 插件列表。

在 webpack 配置中使用插件很简单。然而，有许多用例值得进一步探索。在此处了解更多相关信息。

模式

通过将 mode 参数设置为 development、production 或 none，您可以启用 webpack 内置的对应每个环境的优化。默认值为 production。

export default {
  mode: "production",
};

在此处了解有关 模式配置 以及每个值上进行的优化的更多信息。

浏览器兼容性

Webpack 支持所有 符合 ES5 标准 的浏览器（不支持 IE8 及更低版本）。Webpack 需要 Promise 来支持 import() 和 require.ensure()。如果您想支持旧版浏览器，则需要在使用这些表达式之前 加载 polyfill。

环境

Webpack 5 要求 Node.js 版本 10.13.0 或更高版本。