内部 webpack 插件

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

内部插件类别

环境

影响编译器环境的插件。

NodeEnvironmentPlugin

webpack.node.NodeEnvironmentPlugin()

将 Node.js 样式文件系统应用于编译器。

编译器

影响编译器的插件

MemoryCachePlugin

MemoryCachePlugin()

向编译器添加缓存,其中模块缓存在内存中。

ProgressPlugin

ProgressPlugin(handler)

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

RecordIdsPlugin

RecordIdsPlugin()

从记录中保存和恢复模块和块 ID。

入口

向编译添加入口块的插件。

EntryPlugin

EntryPlugin(context, entry, options)

在编译时添加入口块。该块命名为 options.name,仅包含一个模块(以及依赖项)。该模块从 context(绝对路径)中的 entry 解析。

PrefetchPlugin

PrefetchPlugin(context, request)

预取 request 和依赖项以实现更并行的编译。它不会创建任何块。该模块从 context(绝对路径)中的 request 解析。

输出

JsonpTemplatePlugin

JsonpTemplatePlugin(options)

块被包装到 JSONP 调用中。加载算法包含在入口块中。它通过添加 <script> 标记来加载块。

options 是输出选项。

options.jsonpFunction 是 JSONP 函数。

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

options.chunkFilename 是预期块的文件名。

NodeTemplatePlugin

node/NodeTemplatePlugin(options)

将块包装到导出已捆绑模块的 Node.js 模块中。入口块通过要求加载块。

options 是输出选项。

options.chunkFilename 是预期块的文件名。

LibraryTemplatePlugin

LibraryTemplatePlugin(name, target)

入口块经过修饰,形成类型为 type 的库 name

WebWorkerTemplatePlugin

webworker/WebWorkerTemplatePlugin(options)

通过 importScripts 加载块。否则与 JsonpTemplatePlugin 类似。

options 是输出选项。

EvalDevToolModulePlugin

通过用带 // @sourceURL 注释的 eval 包装每个模块,修饰模块模板。

SourceMapDevToolPlugin

SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)

通过为每个块生成 SourceMap,修饰模板。

sourceMapFilename SourceMap 的文件名模板。[hash][name][id][file][filebase] 会被替换。如果缺少此参数,SourceMap 将作为 DataUrl 内联。

HotModuleReplacementPlugin

HotModuleReplacementPlugin(options)

添加对热模块替换的支持。修饰模板以添加运行时代码。添加 module.hot API。

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

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

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

source

影响模块源代码的插件。

APIPlugin

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

CompatibilityPlugin

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

ConstPlugin

尝试计算 if (...) 语句和三元运算符中的表达式,用 true/false 替换它们,以便使用解析器触发的钩子进一步消除可能存在的死分支。

在生产模式下,针对死分支有多项优化

  • 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,则它将由 require(<request>) 加载的模块填充。

NodeStuffPlugin

NodeStuffPlugin(options, context)

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

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

RequireJsStuffPlugin

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

require[js].config 已删除。require.version0.0.0requirejs.onError 已映射到 require.onError

NodeSourcePlugin

node/NodeSourcePlugin(options)

此模块添加了 Node.js 中不可用、非 Node.js 环境中可用的内容。

如果使用,它会添加 processconsoleBufferglobal 的 polyfill。它还会绑定内置的 Node.js 替换模块。

NodeTargetPlugin

node/NodeTargetPlugin()

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

如果捆绑,它会确保本机模块正确加载。

AMDPlugin

dependencies/AMDPlugin(options)

向模块提供 AMD 风格的 definerequire。还会将 require.amddefine.amd 和 webpack_amd_options## 绑定到作为参数传递的 options

CommonJsPlugin

dependencies/CommonJsPlugin

向模块提供 CommonJs 风格的 require

RequireContextPlugin

dependencies/RequireContextPlugin(modulesDirectories, extensions)

提供 require.context。参数 modulesDirectoriesextensions 用于查找文件的备用请求。向解析器提供相同的数组会很有用。

RequireEnsurePlugin

dependencies/RequireEnsurePlugin()

提供 require.ensure

RequireIncludePlugin

dependencies/RequireIncludePlugin()

提供 require.include

DefinePlugin

DefinePlugin(definitions)

为标识符定义常量。

definitions 是一个对象。

优化

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

LimitChunkCountPlugin

optimize/LimitChunkCountPlugin(options)

合并块限制块计数低于 options.maxChunks

每个块的开销由 options.chunkOverhead 提供,或者默认为 10000。入口块大小乘以 options.entryChunkMultiplicator(或 10)。

首先合并减少总大小最多的块。如果多个组合相等,则合并后的最小大小获胜。

MergeDuplicateChunksPlugin

optimize/MergeDuplicateChunksPlugin()

合并具有相同模块的块。

RemoveEmptyChunksPlugin

optimize/RemoveEmptyChunksPlugin()

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

MinChunkSizePlugin

optimize/MinChunkSizePlugin(minChunkSize)

合并块,直到每个块的最小大小为minChunkSize

ModuleConcatenationPlugin

有关详细信息,请参阅ModuleConcatenationPlugin 页面

FlagIncludedChunksPlugin

optimize/FlagIncludedChunksPlugin()

添加包含在块中的块的块 ID。这消除了不必要的块加载。

RealContentHashPlugin

optimize/RealContentHashPlugin()

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

Hook

RealContentHashPlugin提供了一个updateHash 5.8.0+ 钩子,用于自定义哈希更新

const webpack = require('webpack');
const RealContentHashPlugin = webpack.optimize.RealContentHashPlugin;
// ...
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
  });
});

5 位贡献者

iAziz786EugeneHlushkoooflorentLegendschenxsan