内置插件

以下是 webpack 内部使用的插件列表。

W> 只有在基于 webpack 构建自己的编译器，或深入检查其内部机制时，你才需要关注它们。

内部插件的分类：

• 环境
• 编译器
• 入口
• 输出
• 源码
• 优化

环境 {#environment}

影响编译器环境的插件。

NodeEnvironmentPlugin

webpack.node.NodeEnvironmentPlugin()

将 Node.js 风格的文件系统应用于编译器。

编译器 {#compiler}

影响编译器的插件。

MemoryCachePlugin

MemoryCachePlugin()

为编译器添加缓存，将模块缓存在内存中。

ProgressPlugin

ProgressPlugin(handler)

钩入编译器以提取进度信息。handler 必须具有 function(percentage, message) 签名。percentage 以 0 到 1 之间的值调用，其中 0 表示开始，1 表示结束。

RecordIdsPlugin

RecordIdsPlugin()

从 records 中保存和恢复模块和 chunk 的 id。

入口 {#entry}

向编译中添加入口 chunk 的插件。

EntryPlugin

EntryPlugin(context, entry, options)

在编译时添加一个入口 chunk。该 chunk 命名为 options.name，并且只包含一个模块（加上依赖项）。该模块在 context（绝对路径）中从 entry 解析。

PrefetchPlugin

PrefetchPlugin(context, request)

预取 request 及其依赖项，以实现更并行的编译。它不会创建任何 chunk。该模块在 context（绝对路径）中从 request 解析。

输出 {#output}

JsonpTemplatePlugin

JsonpTemplatePlugin(options)

将 chunk 包装成 JSONP 调用。入口 chunk 中包含加载算法。它通过添加 <script> 标签来加载 chunk。

options 是输出选项。

options.jsonpFunction 是 JSONP 函数。

options.publicPath 用作加载 chunk 的路径。

options.chunkFilename 是 chunk 预期被加载的文件名。

NodeTemplatePlugin

node/NodeTemplatePlugin(options)

将 chunk 包装成导出打包模块的 Node.js 模块。入口 chunk 通过 require 它们来加载 chunk。

options 是输出选项。

options.chunkFilename 是 chunk 预期被加载的文件名。

LibraryTemplatePlugin

LibraryTemplatePlugin(name, target)

装饰入口 chunk，使其形成类型为 type、名称为 name 的库。

WebWorkerTemplatePlugin

webworker/WebWorkerTemplatePlugin(options)

chunk 通过 importScripts 加载。除此之外，它与 JsonpTemplatePlugin 类似。

options 是输出选项。

EvalDevToolModulePlugin

通过将每个模块包装在带有 // @sourceURL 注释的 eval 中来装饰模块模板。

SourceMapDevToolPlugin

SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)

通过为每个 chunk 生成 SourceMap 来装饰模板。

sourceMapFilename 是 SourceMap 的文件名模板。[hash]、[name]、[id]、[file] 和 [filebase] 会被替换。如果缺少此参数，SourceMap 将以内联 DataUrl 形式存在。

HotModuleReplacementPlugin

HotModuleReplacementPlugin(options)

为热模块替换提供支持。装饰模板以添加运行时代码。添加 module.hot API。

options.hotUpdateChunkFilename 热更新 chunk 的文件名。

options.hotUpdateMainFilename 热更新清单的文件名。

options.hotUpdateFunction 热更新的 JSON 函数名。

源码 {#source}

影响模块源码的插件。

APIPlugin

使 webpack_public_path、webpack_require、webpack_modules 和 webpack_chunk_load 可访问。确保 require.valueOf 和 require.onError 不会被其他插件处理。

CompatibilityPlugin

目前无用。确保与其他模块加载器的兼容性。

ConstPlugin

尝试评估 if (...) 语句和三元表达式中的表达式，用 true/false 替换它们，以便使用解析器触发的 hooks 进一步消除死分支。

在生产模式下，有多种关于死分支的优化：

• 由 Terser 执行的优化
• 由 webpack 执行的优化

webpack 会尝试评估条件语句。如果成功，则移除死分支。webpack 无法进行常量折叠，除非编译器已知该常量。例如：

import { calculateTax } from "./tax";

const FOO = 1;
if (FOO === 0) {
  // dead branch
  calculateTax();
}

在上面的示例中，webpack 无法修剪该分支，但 Terser 可以。然而，如果使用 DefinePlugin 定义 FOO，webpack 将成功修剪。

需要说明的是，import { calculateTax } from './tax'; 也会被移除，因为 calculateTax() 调用位于死分支中且已被消除。

ProvidePlugin

ProvidePlugin(name, request)

如果模块中使用了 name，它会由通过 import ... from <request>/import(<request>)/require(<request>) 加载的模块填充。

NodeStuffPlugin

NodeStuffPlugin(options, context)

提供 Node.js 模块中通常可用的内容。

它还确保如果使用 module，则会填充一些 Node.js 相关内容。

RequireJsStuffPlugin

提供 require.js 中通常可用的内容。

require[js].config 被移除。require.version 为 0.0.0。requirejs.onError 映射到 require.onError。

NodeSourcePlugin

node/NodeSourcePlugin(options)

该模块添加 Node.js 中可用但在非 Node.js 环境中不可用的内容。

如果使用到 process、console、Buffer 和 global，它会为它们添加 polyfill。它还会绑定 Node.js 内置的替代模块。

NodeTargetPlugin

node/NodeTargetPlugin()

如果你在 Node.js 环境中运行 bundle，应使用该插件。

它确保原生模块即使在打包后也能正确加载。

AMDPlugin

dependencies/AMDPlugin(options)

向模块提供 AMD 风格的 define 和 require。同时将 require.amd、define.amd 和 webpack_amd_options## 绑定到作为参数传入的 options。

CommonJsPlugin

dependencies/CommonJsPlugin

向模块提供 CommonJS 风格的 require。

RequireContextPlugin

dependencies/RequireContextPlugin(modulesDirectories, extensions)

提供 require.context。modulesDirectories 和 extensions 参数用于查找文件的替代请求。提供与提供给 resolver 相同的数组会很有用。

RequireEnsurePlugin

dependencies/RequireEnsurePlugin()

提供 require.ensure。

RequireIncludePlugin

dependencies/RequireIncludePlugin()

提供 require.include。

DefinePlugin

DefinePlugin(definitions)

为标识符定义常量。

definitions 是一个对象。

优化 {#optimize}

请注意，webpack.optimize 命名空间下的所有插件只应在 mode 设置为 'none' 时使用。否则，你可能会遇到插件被应用两次的问题。

LimitChunkCountPlugin

optimize/LimitChunkCountPlugin(options)

合并 chunk，使 chunk 数量低于 options.maxChunks。

每个 chunk 的开销由 options.chunkOverhead 提供，默认值为 10000。入口 chunk 的大小乘以 options.entryChunkMultiplicator（或 10）。

最能减少总大小的 chunk 会首先被合并。如果多个组合相同，则合并后大小最小的胜出。

MergeDuplicateChunksPlugin

optimize/MergeDuplicateChunksPlugin()

具有相同模块的 chunk 会被合并。

RemoveEmptyChunksPlugin

optimize/RemoveEmptyChunksPlugin()

从 chunk 中移除已包含在每个父 chunk 中的模块。

MinChunkSizePlugin

optimize/MinChunkSizePlugin(minChunkSize)

合并 chunk，直到每个 chunk 达到 minChunkSize 的最小大小。

ModuleConcatenationPlugin

详见 ModuleConcatenationPlugin 页面。

FlagIncludedChunksPlugin

optimize/FlagIncludedChunksPlugin()

为 chunk 添加包含在其中的 chunk id。这消除了不必要的 chunk 加载。

RealContentHashPlugin

optimize/RealContentHashPlugin()

当启用 optimization.realContentHash 选项时，webpack 将在内部将 RealContentHashPlugin 应用于编译器。

Hook

RealContentHashPlugin 提供了一个 updateHash 钩子，用于自定义哈希更新：

import webpack from "webpack";

const { RealContentHashPlugin } = webpack.optimize;
// ...
compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
  const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
  hooks.updateHash.tap("MyPlugin", (content, oldHash) => {
    // you can calculate the hash here as you wish
  });
});