这是 webpack 内部使用的插件列表。
内部插件类别
影响编译器环境的插件。
webpack.node.NodeEnvironmentPlugin()
将 Node.js 样式文件系统应用于编译器。
影响编译器的插件
MemoryCachePlugin()
向编译器添加缓存,其中模块缓存在内存中。
ProgressPlugin(handler)
挂接到编译器以提取进度信息。handler
必须具有签名 function(percentage, message)
。百分比以 0 到 1 之间的值调用,其中 0 表示开始,1 表示结束。
RecordIdsPlugin()
从记录中保存和恢复模块和块 ID。
向编译添加入口块的插件。
EntryPlugin(context, entry, options)
在编译时添加入口块。该块命名为 options.name
,仅包含一个模块(以及依赖项)。该模块从 context
(绝对路径)中的 entry
解析。
PrefetchPlugin(context, request)
预取 request
和依赖项以实现更并行的编译。它不会创建任何块。该模块从 context
(绝对路径)中的 request
解析。
JsonpTemplatePlugin(options)
块被包装到 JSONP 调用中。加载算法包含在入口块中。它通过添加 <script>
标记来加载块。
options
是输出选项。
options.jsonpFunction
是 JSONP 函数。
options.publicPath
用作加载块的路径。
options.chunkFilename
是预期块的文件名。
node/NodeTemplatePlugin(options)
将块包装到导出已捆绑模块的 Node.js 模块中。入口块通过要求加载块。
options
是输出选项。
options.chunkFilename
是预期块的文件名。
LibraryTemplatePlugin(name, target)
入口块经过修饰,形成类型为 type
的库 name
。
webworker/WebWorkerTemplatePlugin(options)
通过 importScripts
加载块。否则与 JsonpTemplatePlugin
类似。
options
是输出选项。
通过用带 // @sourceURL
注释的 eval
包装每个模块,修饰模块模板。
SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)
通过为每个块生成 SourceMap,修饰模板。
sourceMapFilename
SourceMap 的文件名模板。[hash]
、[name]
、[id]
、[file]
和 [filebase]
会被替换。如果缺少此参数,SourceMap 将作为 DataUrl 内联。
HotModuleReplacementPlugin(options)
添加对热模块替换的支持。修饰模板以添加运行时代码。添加 module.hot
API。
options.hotUpdateChunkFilename
热更新块的文件名。
options.hotUpdateMainFilename
热更新清单的文件名。
options.hotUpdateFunction
热更新的 JSON 函数名。
影响模块源代码的插件。
使 webpack_public_path、webpack_require、webpack_modules 和 webpack_chunk_load 可访问。确保 require.valueOf
和 require.onError
不被其他插件处理。
目前无用。确保与其他模块加载器兼容。
尝试计算 if (...)
语句和三元运算符中的表达式,用 true
/false
替换它们,以便使用解析器触发的钩子进一步消除可能存在的死分支。
在生产模式下,针对死分支有多项优化
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(name, request)
如果在模块中使用 name
,则它将由 require(<request>)
加载的模块填充。
NodeStuffPlugin(options, context)
提供 Node.js 模块中通常可用的内容。
它还确保如果你使用 module
,则会用一些 Node.js 内容填充它。
提供 require.js 中通常可用的内容。
require[js].config
已删除。require.version
为 0.0.0
。requirejs.onError
已映射到 require.onError
。
node/NodeSourcePlugin(options)
此模块添加了 Node.js 中不可用、非 Node.js 环境中可用的内容。
如果使用,它会添加 process
、console
、Buffer
和 global
的 polyfill。它还会绑定内置的 Node.js 替换模块。
node/NodeTargetPlugin()
如果你在 Node.js 环境中运行 bundle,则应该使用这些插件。
如果捆绑,它会确保本机模块正确加载。
dependencies/AMDPlugin(options)
向模块提供 AMD 风格的 define
和 require
。还会将 require.amd
、define.amd
和 webpack_amd_options## 绑定到作为参数传递的 options
。
dependencies/CommonJsPlugin
向模块提供 CommonJs 风格的 require
。
dependencies/RequireContextPlugin(modulesDirectories, extensions)
提供 require.context
。参数 modulesDirectories
和 extensions
用于查找文件的备用请求。向解析器提供相同的数组会很有用。
dependencies/RequireEnsurePlugin()
提供 require.ensure
。
dependencies/RequireIncludePlugin()
提供 require.include
。
DefinePlugin(definitions)
为标识符定义常量。
definitions
是一个对象。
请注意,只有当 mode
设置为 'none'
时,才应该使用 webpack.optimize
命名空间下的所有插件。否则,你可能会遇到插件被应用两次的问题。
optimize/LimitChunkCountPlugin(options)
合并块限制块计数低于 options.maxChunks
。
每个块的开销由 options.chunkOverhead
提供,或者默认为 10000。入口块大小乘以 options.entryChunkMultiplicator
(或 10)。
首先合并减少总大小最多的块。如果多个组合相等,则合并后的最小大小获胜。
optimize/MergeDuplicateChunksPlugin()
合并具有相同模块的块。
optimize/RemoveEmptyChunksPlugin()
从块中移除包含在每个父块中的模块。
optimize/MinChunkSizePlugin(minChunkSize)
合并块,直到每个块的最小大小为minChunkSize
。
有关详细信息,请参阅ModuleConcatenationPlugin 页面。
optimize/FlagIncludedChunksPlugin()
添加包含在块中的块的块 ID。这消除了不必要的块加载。
optimize/RealContentHashPlugin()
当optimization.realContentHash
选项启用时,webpack 将在内部将RealContentHashPlugin
应用于编译器。
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
});
});