Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

教程

webpack-4

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度可配置性，可以很好满足你的需求。

在开始前你需要先理解一些核心概念：

• 入口(entry)

• 输出(output)

• loader

• 插件(plugin)

• 模式(mode)

• 浏览器兼容性(browser compatibility)

• 环境(environment)

正如我们在 起步 中提到的，在 webpack 配置中有多种方式定义 entry 属性。

除了解释为什么它可能非常有用，我们还将向你展示如何去配置 entry 属性。

单个入口（简写）语法

用法：entry: string | [string]

• webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

可以通过配置 output 选项，告知 webpack 如何向硬盘写入编译文件。

注意，即使可以存在多个 entry 起点，但只能指定一个 output 配置。

用法

在 webpack 配置中，output 属性的最低要求是，将它的值设置为一个对象，然后为将输出文件的文件名配置为一个 output.filename：

• webpack.config.js

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

loader 用于对模块的源代码进行转换。

loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。

因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

示例

例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。

插件是 webpack 的 支柱 功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

• Tip

如果在插件中使用了 webpack-sources 的 package，请使用 require('webpack').sources 替代 require('webpack-sources')，以避免持久缓存的版本冲突。

剖析

webpack 插件是一个具有 apply 方法的 JavaScript 对象。

你可能已经注意到，很少有 webpack 配置看起来完全相同。

这是因为 webpack 的配置文件是 JavaScript 文件，文件内导出了一个 webpack 配置的对象。

webpack 会根据该配置定义的属性进行处理。

由于 webpack 遵循 CommonJS 模块规范，因此，你可以在配置中使用：

• 通过 require(...) 引入其他文件

• 通过 require(...) 使用 npm 下载的工具函数

• 使用 JavaScript 控制流表达式，例如 ?: 操作符

• 对 value 使用常量或变量赋值

• 编写并执行函数，生成部分配置

在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为 模块。

每个模块都拥有小于完整程序的体积，使得验证、调试及测试变得轻而易举。

精心编写的 模块 提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。

Node.js 从一开始就支持模块化编程。

然而，web 的 模块化 正在缓慢支持中。 在 web 界存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。

webpack 从这些系统中汲取了经验和教训，并将 模块 的概念应用到项目的任何文件中。

resolver 是一个帮助寻找模块绝对路径的库。

一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下：

import foo from 'path/to/module';
// 或者
require('path/to/module');

动机

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

这通常被称作微前端，但并不仅限于此。

底层概念

我们区分本地模块和远程模块。本地模块即为普通模块，是当前构建的一部分。远程模块不属于当前构建，并在运行时从所谓的容器加载。

加载远程模块被认为是异步操作。当使用远程模块时，这些异步操作将被放置在远程模块和入口之间的下一个 chunk 的加载操作中。如果没有 chunk 加载操作，就不能使用远程模块。

chunk 的加载操作通常是通过调用 import() 实现的，但也支持像 require.ensure 或 require([...]) 之类的旧语法。