Internal webpack plugins

2023-06-02 15:29 更新

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

内部插件类别:

environment

影响编译器环境的插件。

NodeEnvironmentPlugin

webpack.node.NodeEnvironmentPlugin()

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

compiler

影响编译器的插件

MemoryCachePlugin

MemoryCachePlugin()

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

ProgressPlugin

ProgressPlugin(handler)

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

RecordIdsPlugin

RecordIdsPlugin()

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

entry

插件,将入口块添加到编译中。

EntryPlugin

EntryPlugin(context, entry, options)

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

PrefetchPlugin

PrefetchPlugin(context, request)

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

output

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.valueOf​ 和 ​require.onError​ 不被其他插件处理。

CompatibilityPlugin

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

ConstPlugin

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

生产模式针对死枝有多项优化:

  • The ones performed by Terser
  • The ones performed by 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.version​ 是 ​0.0.0​。 ​requirejs.onError​ 映射为 ​require.onError​。

NodeSourcePlugin

node/NodeSourcePlugin(options)

该模块添加了来自 Node.js 的内容,这些内容在非 Node.js 环境中不可用。

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

NodeTargetPlugin

node/NodeTargetPlugin()

如果您在 Node.js 环境中运行捆绑包,则应使用这些插件。

If 确保即使捆绑了本机模块也能正确加载。

AMDPlugin

dependencies/AMDPlugin(options)

为模块提供 AMD 风格的define 和 require。还将 ​require.amd​、​define.amd​ 和 webpack_amd_options## 绑定到作为参数传递的选项。

CommonJsPlugin

dependencies/CommonJsPlugin

为模块提供 CommonJs 风格的 ​require​。

RequireContextPlugin

dependencies/RequireContextPlugin(modulesDirectories, extensions)

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

RequireEnsurePlugin

dependencies/RequireEnsurePlugin()

提供 ​require.ensure​。

RequireIncludePlugin

dependencies/RequireIncludePlugin()

提供 ​require.include​。

DefinePlugin

DefinePlugin(definitions)

为标识符定义常量。

definitions 是一个对象。

optimize

请注意在 ​webpack.optimize​ 命名空间下的所有插件应该只在 ​mode​ 设置为 ​'none'​ 时使用。否则你将会在插件被两次使用时遇到麻烦。

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
  });
});


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号