其他分享
首页 > 其他分享> > webpack5的变化

webpack5的变化

作者：互联网

webpack5 :

这个版本的重点在于以下几点。

一、webpack 5 的介绍及下载
webpack 5 通过持久缓存提高构建性能。
webpack 5 使用更好的算法和默认值来改善长期缓存。
webpack 5 通过更好的树摇和代码生成来改善捆绑包大小。
webpack 5 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改。
webpack 5 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5。
webpack 5 的下载可以通过 npm i webpack@next webpack-cli -D 命令进行下载。


重大变更：功能清除 

清理弃用的能力 

所有在v4中被废弃的能力都被删除。

迁移：确保您的webpack 4构建没有打印废弃警告。

以下是一些被移除但在v4中没有废弃警告的东西：

废弃代码 

新的弃用包括一个弃用代码，这样他们更容易被引用。

语法废弃 

require.include已被废弃，使用时默认会发出警告。

可以通过Rule.parser.requireInclude将行为改造允许，废弃或替代。

不再为Node.js模块自动引用 

在早期，webpack的目的是为了让大多数的Node.js模块运行在浏览器中，但如今模块的布局已经发生了变化，现在很多模块主要是为前端而编写。webpack <= 4的版本中提供了很多Node.js核心模块的polyfill，一旦有人模块引用了任何一个核心模块（如cypto模块），webpack就会自动引用这些polyfill。

尽管这会有助于使用为Node.js编写模块变得容易，但它在建造时给bundle附加了庞大的polyfill。在大部分情况下，这些polyfill不一定。

从webpack 5开始不再自动填充这些polyfills，而会专注于前端模块兼容。我们的目标是提高web平台的兼容性。

迁移：

重大变更：长期缓存 

确定的Chunk，模块ID和衍生名称 

新增了长期缓存的算法。这些算法在生产模式下是替代启用的。

chunkIds: "deterministic" moduleIds: "deterministic" mangleExports: "deterministic"

该算法机理性的方式为模块和分块分配短的（3或5位）数字ID，这是包大小和长期缓存之间的一种权衡。

moduleIds/chunkIds/mangleExports: false请注意，在webpack 4中，moduleIds/chunkIds: false如果没有自定义插件，则可以正常运行，而在webpack 5中，您必须提供一个自定义插件。

迁移：最好使用chunkIds，moduleIds状语从句：mangleExports的默认值你也。可以选择使用旧的默认值。chunkIds: "size"，moduleIds: "size", mangleExports: "size"，这将会生成更小的包，但为了缓存，会更频繁地将其失效。

注意：在webpack 4中，散列的模块id会导致gzip性能降低。这与模块顺序的改变有关，已经被修正。

注意：在webpack 5中，deterministicIds在生产模式下是替代启用的。

真正的内容哈希 

当使用[contenthash]时，Webpack 5将使用真正的文件内容哈希值。之前它“只”使用内部结构的哈希值。当只有注释被修改或变量被重命名时，这对长期缓存会有积极影响。这些变化在压缩后是不可见的。

重大变更：开发支持 

命名代码块 

在开发模式下，默认启用的新命名代码块ID算法为模块（和文件名）提供了人类的名字。模块ID由其路径决定，相对于context。代码块ID由代码块的内容决定。

所以你不再需要使用import(/* webpackChunkName: "name" */ "module")来调试。

可以在生产环境中使用chunkIds: "named"在生产环境中使用，但要确保不要不小心暴露模块名的敏感信息。

迁移：如果你不喜欢在开发中改变文件名，你可以通过chunkIds: "natural"来使用旧的数字模式。

模块联邦 

Webpack 5增加了一个新的功能“模块联邦”，它允许多个webpack构建一起工作。从运行时的角度来看，多个集成的模块将表现得像一个巨大的连接模块图。从开发者的角度来看，模块可以从指定的远程内置中引入，并以最小的限制来使用。

重大变更：支持崭新的Web平台特性 

JSON模块 

从严格的ECMAScript模块导入时，JSON模块不再有命名的导出。

迁移：使用替换导出。

即使使用替换生成，未使用的属性optimization.usedExports也会被优化，属性会被optimization.mangleExports优化打乱。

可以在Rule.parser.parse中指定一个自定义的JSON解析器来引入类似JSON的文件（例如针对toml，yaml，json5等）。

import.meta 

资源模块 

Webpack 5现在已经对表示资源的模块提供了内置支持。这些模块可以向输出文件夹发送一个文件，或者向javascript包注入一个DataURI。

它们可以通过多种方式被使用：

选择“新的方式”语法是为了允许在没有打包工具的情况下运行代码。这种语法也可以在浏览器中的原生ECMAScript模块中使用。

原生工人支持 

当把资源的new URL和new Worker/ / new SharedWorker/navigator.serviceWorker.register结合起来时，webpack会自动为web worker创建一个新的入口点（entrypoint）。

new Worker(new URL("./worker.js", import.meta.url))

选择这种语法也是为了允许在没有打包工具的情况下运行代码。这种语法在浏览器的原生ECMAScript模块中也可以使用。

URIs 

Webpack 5支持在请求中处理协议。

支持请求中的片段。例如：./file.js#fragment。

初步模块 

Webpack 5支持所谓的“异步模块”。这些模块并非同步解析的，或者基于异步和Promise的。

通过“ import”导入它们会被自动处理，不需要额外的语法，而且几乎看不到区别。

通过require()引入它们会返回一个解析到衍生的Promise。

在webpack中，有多种方式来拥有异步模块。

外部资源 

Webpack 5增加了更多的外部类型来覆盖更多的应用：

promise：一个评估为Promise的表达式。外部模块是一个初始化模块，解析值作为模块转换使用。

import。原生的import()用于加载指定的请求，外部模块是一个初始化模块，解析值作为模块转换。外部模块是一个初始化模块。

module：尚未实现，但计划通过import x from "..."加载模块。

script：通过<script>标签加载一个url，并从一个类别变量（以及它的可选属性）中获取输出。外部模块是一个异步模块。

重大变更：支持全新的Node.js生态特性 

解析 

现在支持package.json中的exports和imports细分。

原生支持Yarn PnP。

重大变更：开发体验 

经过优化的重建目标 

Webpack 5允许传递一个目标列表，和支持目标的版本。

例如target: "node14"``target: ["web", "es2020"]。

这是一个简单的方法，为webpack提供它需要确定的所有信息：

统计资料 

改进了替代值，改为不那么扩展长，也适合大型建造。

进度 

对ProgressPlugin所做的一些改进，它被CLI在参数--progress开启时使用，但也可以作为插件手动使用。

现在它可以计算“入口”，“依赖”和“模块”。现在所有的模块都替换显示了。

以前它只显示了当前处理的模块。这造成了很多stderr输出，在一些控制台上产生了性能问题。现在这个功能被替换关闭（activeModules选项）。这也减少了控制台的垃圾信息量。现在，在构建模块的过程中，向stderr写入的时间被控制在500ms以内。

剖析模式也得到了升级，将显示附加进度消息的时间。这使得它更容易弄清楚清楚插件导致了性能问题。

新增加的percentBy-选项通知ProgressPlugin如何计算进度百分比。

new webpack.ProgressPlugin({ percentBy: 'entries' });

为了使进度百分比更准确，ProgressPlugin会缓存最后已知的总模块数，并在下一次重建时重新使用这个值。

自动添加唯一命名 

在webpack 4中，多个webpack运行时可能会在同一个HTML页面上发生冲突，因为它们使用同一个变量变量进行代码块加载。为了解决这个问题，需要为output.jsonpFunction配置提供一个自定义的名称。

5的WebPack会确实从package.json name中自动推断出一个唯一的构建名称，其并将作为output.uniqueName的默认值。

这个值用于使所有潜在的冲突的变量变量成为唯一。

迁移：由于package.json中有唯一的名称，可将output.jsonpFunction删除。

自动添加公共路径 

Webpack 5会在可能的情况下自动确定output.publicPath。

打字稿类型 

Webpack 5从源码中生成typescript类型，并通过npm包暴露它们。

迁移：删除@types/webpack。当名称不同时更新引用。

重大变更：构建优化 

嵌套的 

webpack现在能够跟踪对补充的嵌套属性的访问。这可以改善重新转换命名空间对象时的Tree Shaking（清除未使用的引入和替换导出）。

// inner.js
export const a = 1;
export const b = 2;

// module.js
export * as inner from './inner';
// 或 import * as inner from './inner'; export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

在这个例子中，可以在生产模式下删除导出的b。

内部模块摇树 

webpack 5没有分析模块的导出和引用之间的依赖关系。webpack 5有一个新的选项optimization.innerGraph，在生产模式下是替换启用的，它可以对模块中的标志进行分析，找到衍生和引用之间的依赖关系。

在这样的模块中：

import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}

内部依赖图算法会发现something只有在使用test转换时才会使用。这允许将更多的出口标记为未使用，并从代码包中省略更多的代码。

当设置"sideEffects": false时，可以省略更多的模块。在这个test示例中，当更改替换使用时，./something将被省略。

要获得未使用的导出信息，需要使用optimization.unusedExports。要删除无并发症的模块，需要使用optimization.sideEffects。

可以分析以下标记。

反馈：如果你发现这个分析中的东西，请报告一个问题，我们会考虑增加它。

使用eval()将为一个模块放弃这个优化，因为通过eval的代码可以引用范围内的任何标记。

这种优化也被称为深度范围分析。

CommonJs摇树 

webpack曾经不进行对CommonJs导出和require()调用时的开始使用分析。

webpack 5增加了对一些CommonJs构造的支持，允许消除未使用的CommonJs导出，并从require()调用中跟踪引用的替换名称。

支持以下构造：

当检测到不可分析的代码时，webpack会放弃，并且完全不跟踪这些模块的入门信息（出于性能考虑）。

异常分析 

在package.json中的"sideEffects"标志允许手动将模块标记为无异常，由此允许在不使用时放弃它们。

webpack 5也可以根据对源代码的静态分析，自动将模块标记为无突变。

每个运行时的优化 

Webpack 5现在能够（在情况下也可以）分析和优化每个运行时的模块（一个运行时通常等于一个入口点）。这允许只在真正需要的地方生成这些入口点。入口点之间不会相互影响（只要每个入口点使用一个运行时）

模块合并 

模块合并也可以在每个运行时工作，允许每个运行时进行不同的合并

在初始时webpack 5已经添加了对ExternalModules和json模块的支持，更多的模块可能很快就会发布。

通用Tree Shaking改进 

export *已经得到改进，可以跟踪更多的信息，并且不再将默认进行标记为使用。

export * 现在会在webpack确定有冲突的发出时显示警告。

import()允许通过/* webpackExports: ["abc", "default"] */该魔法注释手动tree shake模块。

开发与生产的一致性问题 

我们试图通过改善两种模式的相似性，在开发模式的整合性能和避免仅在生产模式的产生的问题之间找到一个很好的平衡点。

Webpack 5默认在两种模式下都启用了“ sideEffects”优化。在webpack 4中，由于package.json中的"sideEffects"标记不正确，这种优化导致了一些只在生产模式下出现的错误。在开发过程中启用这个优化可以重启更容易地发现这些问题。

在很多情况下，开发和生产都是在不同的操作系统上进行的，文件系统的大小写敏感度不同，所以webpack 5增加了一些奇怪的大小写的警告/错误。

改进代码生成 

当ASI发生时，webpack会检测到，当没有分号插入时，会生成更短的代码。- Object(...)> (0, ...)。

webpack将多个导出的getters合并为一个运行时函数调用。- r.d(x, "a", () => a); r.d(x, "b", () => b);> r.d(x, {a: () => a, b: () => b});。

现在output.environment允许使用ECMAScript特性可以用于webpack生成的运行时代码。

通常人们不会直接指定这个选项，否则会使用target选项。

webpack 4之前只生成ES5的代码。web包5则现在既可以生成ES5又可以生成ES6 / ES2015代码。

只支持现代浏览器，将使用箭头函数生成更短的代码，使用声明const与TDZ为export default生成更符合规范的代码。

改进target配置

在webpack 4中，“目标”是在"web"和"node"之间的一个粗略的选择（还有一些其他的）。Webpack 5给你更多的选择。

target选项现在比以前影响了更多关于生成代码的事情。

对于其中的某些情况，在"web"和"node"之间的选择过度粗略，我们需要更多的信息。因此，我们允许指定最低版本，例如"node10.13"，并同时出更多关于目标环境的属性。

现在也允许使用一个多个组合多个目标，webpack将确定所有目标的最小属性。使用排列也很有用，当使用像"web"或"node"这样没有提供完整信息的目标时（没有版本号）。例如，["web", "es2020"]结合了两个一个部分目标。

有一个目标"browserslist"，它将使用browserslist类库的数据来确定环境的属性。当项目中存在可用的browserslist配置时，这个目标也会被默认使用。当没有可用的配置时，使用默认"web"目标。

有些组合和功能还没有实现，会导致错误。它们是为未来的功能做准备。例如：

代码块分解与模块大小 

现在模块的尺寸比单一的数字更好的表达方式。现在有不同类型的大小。

SplitChunksPlugin现在知道如何处理这些不同的大小，称为它们用于minSize和maxSize。默认情况下，只有javascript大小被处理，但你现在可以传递多个值来管理它们：

module.exports = {
  optimization: {
    splitChunks: {
      minSize: {
        javascript: 30000,
        webassembly: 50000,
      },
    },
  },
};

你仍然可以使用一个数字来表示大小。在这种情况下，webpack会自动使用替换的大小类型。

mini-css-extract-plugin使用css/mini-extra作为大小类型，可以将其大小类型自动添加到替代类型中。

重大变更：性能优化 

永久缓存 

现在有一个文件系统缓存。它是可选的，可以通过以下配置启用：

module.exports = {
  cache: {
    // 1. 将缓存类型设置为文件系统
    type: 'filesystem',

    buildDependencies: {
      // 2. 将你的 config 添加为 buildDependency，以便在改变 config 时获得缓存无效
      config: [__filename],

      // 3. 如果你有其他的东西被构建依赖，你可以在这里添加它们
      // 注意，webpack、加载器和所有从你的配置中引用的模块都会被自动添加
    },
  },
};

重要说明：

默认情况下，webpack预期webpack所在的node_modules目录只会被包管理器修改。对node_modules来说，哈希值和替换会被跳过。出于性能考虑，只使用包名和版本。resolve.symlinks: false只要不指定，Symlinks（即npm/yarn link）就没有问题（无论如何都要避免）。直接不要编辑node_modules中的文件，你除非用snapshot.managedPaths: []以剔除该优化。当使用即插即用纱时，的WebPack假设纱缓存是不可改变的（通常是这样）。你可以使用snapshot.immutablePaths: []来退出这个优化。

缓存将默认存储在node_modules/.cache/webpack（当使用node_modules时）或.yarn/.cache/webpack（当使用即插即用纱时）中。当所有的插件都正确处理缓存时，你可能永远都不需要手动删除它。

许多内部插件也会使用持久性缓存。例如SourceMapDevToolPlugin（缓存SourceMap的生成）或ProgressPlugin（缓存模块数量）

永久性缓存将根据使用情况自动创建多个缓存文件，以优化对缓存的读写访问。

文件哈希也允许在CI中使用持久性缓存。

编译器闲置和关闭 

插件可能会使用这些钩子来做不重要的工作。上）。在编译器关闭时-所有剩余的工作应该正确地完成。

插件和它们各自的作者应该预料到，有些用户可能会忘记关闭关闭编译器。所以，所有的工作最终也应该在相应状态下完成。当工作中断时，应该防止逐步退出。

webpack()适当在被传递通过时时自动调用close。

迁移：在使用Node.js API时，一定要在完成工作后调用Compiler.close。

文件生成 

webpack过去总是在第一次构建时发出所有的输出文件，但在增量（观察）生成时跳过了写入未更改的文件。假设在webpack运行时，没有任何其他东西改变输出文件。

增加了持久性缓存后，即使在重新启动webpack进程时，也应该会有类似监听的体验，但如果认为甚至在webpack不运行时也没有其他东西改变输出目录，那这个假设就太强了。

所以webpack现在会检查输出目录中现有的文件，将其内容与内存中的输出文件进行比较。只有当文件被改变时，它才会写入文件。这只是在第一次构建时进行。任何增量生成都会在运行中的webpack逐步中生成新的资产时写入文件。

我们假设webpack和插件只有在内容被改变时才会生成新的资产。应该使用缓存来确保在输入相同时不会生成新的资产。

被标记为[不可变]的文件（包括内容哈希），当已经存在一个同名文件时，将永远不会被写入。我们假设当文件内容发生变化时，内容哈希会发生变化。这在一般情况下是正确的，但在webpack或插件开发过程中可能并不总是如此。

重大变更：长期未解决的问题 

单一文件目标的代码分割 

只允许启动启动文件的目标（如node，WebWorker，electron main）现在支持运行时自动加载引导所需的依赖代码片段。

这允许对这些目标使用chunks: "all"和optimization.runtimeChunk。

请注意，如果目标的代码块加载是异步的，这应该初始评估也是初始化的。当使用output.library时，这可能是一个问题，因为现在转换的值是一个Promise。

更新了解析器 

enhanced-resolve 更新到了v5，有以下改进：

没有JS的代码块 

不包含JS代码的块，将不再生成JS文件。这允许有只包含CSS的代码块。

重大变更：未来计划 

实验特性 

并非所有的功能都是一开始就稳定的。在webpack 4中，我们添加了实验性功能，并在替换日志中指定了它们是实验性的，但从配置中并不总是能清楚地看到这些功能是实验性的。

在webpack 5中，有一个新的experiments配置选项，允许启用实验性功能。

实验性功能可能会在webpack的次要版本中包含破坏性的变化。当这种情况发生时，我们会在变更日志中添加一个明确的注释。这将使我们能够重新进行地域交替实验性功能，同时也使我们能够在主要版本上为稳定的功能停留更连续。

以下的实验功能将随webpack 5一起发布。

请注意，这也意味着WebAssembly的支持现在被替换。

最小的Node.js版本 

最低支持的Node.js版本从6增加到10.13.0（LTS）。

迁移：升级到最新的Node.js版本。

配置变更 

结构的变化 

默认值变更 

this.getOptions 

这个新的API应该可以简化加载器中选项的使用。它允许传递JSON模式进行验证。详情请见PR

this.exec 

这一点已从加载器某些中删除

迁移：这可以在加载器本身实现。

this.getResolve 

loader API中的getResolve(options)将以另一种方式合并选项，参见module.rule``resolve。

由于的WebPack 5在不同的发布依赖关系之间存在差异，传递所以一个dependencyType作为选项对话可能的英文有意义的（例如"esm"， ，"commonjs"或者其他）。

重大内部变更 

去做

这一部分可能需要更多的完善。

以下可能只与插件作者有关：

新的插件运行顺序 

现在webpack 5中的插件在应用配置替换值之前就会被应用。

但这也是一个突破性的变化，因为插件在应用时不能依赖配置值的设置。

迁移：只在插件钩子中访问配置。或者最好完全避免访问配置，并通过构造函数获取选项。

运行时模块 

这些特殊模块负责添加运行时代码。它们可以被添加到任何块中，但当前总是被添加到运行时块中。时需求“控制某些运行时模块（或核心运行时组件）被添加到代码包中。这确保了只有使用的运行时代码才会被添加到代码包中。未来，运行时模块也可以添加到按需加载的块中，骑士在需要时加载运行时代码。

在大多数情况下，核心运行代码时允许内联入口模块，不是而用__webpack_require__来调用它。如果代码包中没有其他模块，则根本不需要使用__webpack_require__。这与模块合并很好地结合在一起，即多一个模块被合并成一个模块。

在最好的情况下，根本不需要运行时代码。

迁移：如果您在插件中注入运行时代码到webpack运行时，可以考虑使用RuntimeModules来代替。

序列化 

我们添加了一个序列化机制，以允许在webpack中对复杂对象进行序列化。它有一个可选的语义，所以那些应该被序列化的类需要被明确地标记出来（并且实现其的序列化） 。大多数模块，所有的依赖关系和一些错误都已经初始化了。

迁移：当使用自定义模块或依赖关系时，建议将其实现成可序列化的，分解从持久化缓存中。

用于缓存的插件 

增加了一个带有插件接口的Cache类。该类可用于写入和读取缓存。根据配置的不同，不同的插件可以为缓存添加功能。MemoryCachePlugin增加了内存缓存功能。FileCachePlugin增加了持久性（文件系统）缓存。

FileCachePlugin 使用序列化机制将缓存项目持久化到磁盘上或从磁盘上恢复。

冻结钩子对象 

有hooks的类会冻结其hooks对象，所以通过这种方式添加自定义钩子已经不可能了。

迁移：推荐的添加自定义钩子的方式是使用WeakMap和一个静态的getXXXHooks(XXX)（即getCompilationHook(compilation)）方法。内部类使用与自定义钩子相同的机制。

Tapable插件升级 

webpack 3插件的compat层已经被移除。它在webpack 4中已经被取消了。

一些可选使用的tapable API被删除或废弃。

迁移：使用新的tapable API。

舞台钩子 

在封装代码包过程的几个步骤中，不同阶段有多个钩子，即optimizeDependenciesBasic，optimizeDependencies和optimizeDependenciesAdvanced。这些已经被删除，改为一个单一的钩子，可以它与stage选项对话一起使用。参见OptimizationStages了解可能的stage选项对话值。

迁移：侵入性剩余的钩子。您可以添加一个stage选项。

Main / Chunk / ModuleTemplate废弃 

MainTemplate / ChunkTemplate / ModuleTemplate被废弃，现在JavascriptModulesPlugin负责JS模板。

在那次压缩之前，JS输出由Main / ChunkTemplate处理，而另一个输出（即WASM，CSS）则由插件处理。这样看起来JS是一等公民，而其他输出是二等。这一点，所有的输出都由他们的插件处理。

依然可以侵入部分模板。钩子现在在JavascriptModulesPlugin中，而不是Main / ChunkTemplate中。（是的，插件也可以有钩子，我称为附加钩子。）

有一个兼容层，所以Main / Chunk / ModuleTemplate仍然存在，但只是将tap调用委托给新的钩子位置。

迁移：按照弃用消息中的建议。主要是指向不同位置的钩子。

入口文件预算 

如果传递一个对象作为入口文件，其值可能是一个字符串，字符串拆分或偏移：

module.exports = {
  entry: {
    catalog: {
      import: './catalog.js',
    },
  },
};

法定语法可用于向入口文件传递附加选项。

入口文件输出文件名 

默认情况下，文件入口代码块的输出文件名的英文从output.filename中提取的，但你可以为特定入口文件指定一个自定义的输出文件名：

module.exports = {
  entry: {
    about: { import: './about.js', filename: 'pages/[name][ext]' },
  },
};

入口文件依赖 

默认情况下，每个入口文件代码块都存储了它所使用的所有模块。使用dependOn-选项，你可以将模块从一个入口文件代码块共享到另一个：

module.exports = {
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

app代码块将不包含react-vendors所拥有的模块。

入口文件类库 

入口文件允许允许为每个入口文件传递不同的library选项。

module.exports = {
  entry: {
    commonjs: {
      import: './lib.js',
      library: {
        type: 'commonjs-module',
      },
    },
    amd: {
      import: './lib.js',
      library: {
        type: 'amd',
      },
    },
  },
};

入口文件运行时 

入口文件描述符允许为每个入口文件指定一个运行时代码。当指定时，将创建一个以该名称命名的代码块，其中仅包含该条目的运行时代码。多个当条目指定相同的运行时代码时，该块将包含所有这些入口文件的共同运行时代码。这意味着它们可以在同一个HTML页面中一起使用。

module.exports = {
  entry: {
    app: {
      import: './app.js',
      runtime: 'app-runtime',
    },
  },
};

入口文件代码块加载 

入口文件允许允许为每个入口文件指定一个chunkLoading。

module.exports = {
  entry: {
    app: {
      import: './app.js',
    },
    worker: {
      import: './worker.js',
      chunkLoading: 'importScripts',
    },
  },
};

排序与ID 

webpack曾经在编译阶段以特定的方式对模块和代码块进行排序，以递增方式分配ID。现在不再是这样了。顺序将不再使用ID的生成，取而代之的是，ID生成的完全控制在插件中。

优化模块和代码块顺序的钩子已经被移除。

迁移：在编译阶段，你不能再依赖模块和代码块的顺序了。

从整数到集合（Set） 

存在一个适应层但会打印废弃的警告。

迁移：使用集合方法代替列举方法。

编译文件系统信息 

这个新类可以通过使用缓存的方式访问文件系统的信息。结果，它允许访问文件和目录的副本。如果可能的话，关于更改的信息会从监听那里传输过了，否则将由文件系统访问决定。

后续，会增加访问文件内容hash值的功能，模块可以用文件内容替换文件hash来检查有效。

迁移：使用compilation.fileSystemInfoAPI，替代file/contextTimestamps。

现在可以对目录进行初步管理，允许对ContextModules进行序列化。

增加了Compiler.modifiedFiles（等等Compiler.removedFiles），盔甲更容易引用更改后的文件。

文件系统 

新增了一个APIcompiler.inputFileSystem和compiler.outputFileSystem的新API compiler.intermediateFileSystem，用于所有不被认为是输入或输出的fs操作，如写入记录，缓存或输出配置文件。

文件系统现在有fs接口，不再需要join或mkdirp等额外方式。但如果它们包含join或dirname等类似方法，也会被使用。

模块热替换 

HMR运行时已被重构为运行时模块。HotUpdateChunkTemplate已被合并入ChunkTemplate中。ChunkTemplates和插件也应处理HotUpdateChunk了。

HMR运行时的javascript部分已从核心HMR运行时钟分离出来了。其他模块类型现在也可以使用它们自己的方式处理HMR。在未来，这将使用HMR处理诸如mini-css-extract-plugin或WASM模块。

迁移：此为新功能，无需迁移。

import.meta.webpackHot公开了与module.hot。相同的API当然可以在ESM模块（.mjs，的package.json中的类型： “模块”）中使用，这些模块不能访问module。

工作量 

webpack曾经通过函数调用函数的形式来进行模块处理，还有一个semaphore选项限制并行性。Compilation.semaphore已被删除，现在可以使用异步替换处理，每个步骤都有独立的变量：

这些类别会有一些hook来监听并拦截工作的进程。

未来，多个编译器会同时工作，可以通过拦截这些变量来进行编译工作的编排。

迁移：此为新功能，无需迁移。

记录中 

webpack内部约会了一些日志记录的方法。stats.logging和infrastructureLogging选项可用于启用这些信息。

模块和chunk图 

webpack曾经在依赖关系中存储了已解析的模块，并在chunk中存储约会的模块。但引入发生变化。所有关于模块在模块图中如何连接的信息，现在都存储在ModulGraph的类中。所有关于模块与块如何连接的信息现在都已存储在ChunkGraph的类中。

这意味着以下关于模块的信息已被移动：

当已从缓存中恢复模块时，webpack替换模块从图中对齐。现在已无需执行。一个模块不存储图形的任何信息，技术上可以在多个图形中使用。容易。

这部分变化中大部分都有一个compat-layer，当使用时，它会打印一个弃用警告。

迁移：在ModuleGraph和ChunkGraph上使用新的API。

初始化片段 

DependenciesBlockVariables已被移除，改为InitFragments。DependencyTemplates现在可以添加InitFragments，以将代码注入模块源的起始位置。InitFragments允许删除重复数据。

迁移：使用InitFragments代替，而无需在源文件的负索引出插入。

模块源类型 

模块现在必须通过Module.getSourceTypes()来定义其支持的插件类型。根据这一点，不同的插件会用这些类型调用source()。对于源类型为javascript的JavascriptModulesPlugin插入源代码嵌入到包中。源类型webassembly的WebAssemblyModulesPlugin会发出一个wasm文件。同时，也支持自定义源类型，例如，mini-css-extract-plugin会使用源类型为stylesheet将二进制文件嵌入到css文件中。

模块类型与源类型间没有关系。甚至模块类型为json，也可以使用源类型为javascript和模块类型为webassembly/experimental的javascript和webassembly。

迁移：自定义模块需要实现这些新的接口方法。

Stats的插件 

统计的preset，default，json状语从句：toString现已由插件系统-内置，将当前的统计数据转换为插件。

迁移：您现在可以自定义它，而无需替换整个Stats功能。额外的信息现在可以添加到stats json中，而不是单独编写文件。

全新的监听 

webpack所使用的监听已初始化。它之前使用的是chokidar和原生依赖fsevents（仅在macOS上）。现在它在只基于原生的Node.js中的fs。这意味着在webpack中已经没有原生依赖了。

结果，API还可以捕获mtimes和监视事件时间，以及丢失文件的信息。导致，WatchFileSystemAPI只需一点点替换。在修改的同时，我们还将Arrays转换为Sets，Objects转换为Maps。

发出后的SizeOnlySource 

的WebPack使用现在SizeOnlySource替换Compilation.assets中的来源，以减少内存占用。

多次发射资产 

原来的警告Multiple assets emit different content to the same filename，现在成为错误。

出口信息 

ModuleGraph现在为每个Module提供了一个ExportsInfo，它用于存储每个export的信息。如果模块仅以相反的方式使用，它还存储了关于未知export的信息，

对于每个出口，都会存储以下信息：

代码生成阶段 

编译的代码生成功能作为单独的编译阶段。它不再隐藏在Module.source()和Module.getRuntimeRequirements()中运行了。

它应该运行报告该阶段的进度。并进行代码生成在剖析时更加清晰可见。

迁移：Module.source()和Module.getRuntimeRequirements()已弃用。使用Module.codeGeneration()代替。

依赖关系参考 

webpack曾经有一个单一的方法和类型来表示依赖关系的引用（Compilation.getDependencyReference会返回一个DependencyReference）该类型用于约会关于该引用的所有信息，如被引用的模块，已经发布了什么export，如果是弱引用，还需要订阅一些相关信息。

把所有这些信息重建在一起，拿到参考的成本就很高，而且很容易更换（每次有人需要一个信息）。

在webpack5中，这部分代码库被替换了，方法进行了拆分。

表示依赖 

这是NormalModules的一种新Dependencies类型：Presentational Dependencies

这些依赖只能在代码生成阶段使用，但在模块图生成过程中未使用。

这些依赖关系的处理成本最低，webpack会进行地使用这些

弃用的装载机 

微小冲突 

其他微小幅度 

   详情见webpack官网 webpack5发布公告

标签：webpack5,Compilation,Module,webpack,添加,模块,使用,变化
来源： https://blog.csdn.net/weixin_41319237/article/details/115488032