标签：webpack5 Compilation Module webpack 添加 模块 使用 变化

webpack5 :

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

• 尝试用持久性缓存来提高内置性能。
• 尝试用更好的算法和最小值来改进长期缓存。
• 尝试用更好的Tree Shaking和代码生成来改善包大小。
• 尝试改善与网络平台的兼容性。
• 尝试在不约会任何破坏性变化的情况下，清理那些在实现v4功能时处于奇怪状态的内部结构。
• 尝试通过现在约会突破性的变化来为未来的功能做准备，使其能够重新连续地保持在v5版本上。

一、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中没有废弃警告的东西：

• IgnorePlugin和BannerPlugin现在必须只传递一个参数，这个参数可以是对象，字符串或函数。

废弃代码 

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

语法废弃 

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平台的兼容性。

迁移：

• 尽量使用前端兼容的模块。
• 可以手动为Node.js核心模块添加polyfill。错误提示会告诉你如何实现。
• 包作者：在package.json中添加browser前缀，使包与前端兼容。为浏览器提供其他的实现/依赖项。

重大变更：长期缓存 

确定的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 

• import.meta.webpackHot是module.hot的别名，在严格的ESM中也可以使用。
• import.meta.webpack 是webpack的主要版本号。
• import.meta.url是当前文件的file:url（而非__filename，但作为文件url）。

资源模块 

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

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

• import url from "./image.png"和在module.rule中设置type: "asset"当匹配这样的引入时。（老方法）
• new URL("./image.png", import.meta.url) （新方式）

选择“新的方式”语法是为了允许在没有打包工具的情况下运行代码。这种语法也可以在浏览器中的原生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支持在请求中处理协议。

• 支持data:。支持Base64或原始编码。Mimetype可以在module.rule中被映射到加载器和模块类型。例如：import x from "data:text/javascript,export default 42"。
• 支持file:。
• 支持http(s):，但需要通过new webpack.experiments.s schemesHttp(s)UriPlugin()选择加入。
  • 默认情况下，当目标为“ web”时，这些URI会导致对外部资源的请求（它们是外部资源）。

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

初步模块 

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

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

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

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

• 初步的外部资源（异步外部）
• 新规范中的WebAssembly模块
• 使用顶层Await的ECMAScript模块。

外部资源 

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提供它需要确定的所有信息：

• 代码块加载机制，以及
• 支持的语法，如箭头函数

统计资料 

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

• 现在默认情况下，代码块关系是隐藏的，用可以stats.chunkRelations来e月刊。
• Stats现在可以区分files和auxiliaryFiles。
• Stats现在重置隐藏模块和代码块的id。这可以通过stats.ids来切换。
• 现在所有模块的列表是按照到入口点的距离排序的。这可以通过stats.modulesSort来改变。
• 代码块模块的列表现在按模块名称排序。这可以通过stats.chunkModulesSort来改变。
• 内置模块的列表现在是按失真结构排序的。这可以通过stats.nestedModulesSort来改变。
• 现在，代码块和资源会显示代码块id提示。
• 资产和模块将以树状而不是列表/表格的形式显示。
• 一般信息现在会在最后的摘要中显示。它显示了webpack版本，配置名称和警告/错误计数。
• 哈希值现在重置是隐藏的。这可以通过stats.hash来改变。
• 默认情况下不再不再显示重建的临时，这可以通过stats.builtAt开启。它会在摘要中显示替代。
• 默认情况下，不再显示子编译。可以它们用stats.children来显示。

进度 

对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。

可以分析以下标记。

• 函数声明
• 类声明
• 默认导出export default 或定义变量以下的：
  • 函数表达式
  • 类表达式
  • 顺序表达式
  • /*#__PURE__*/ 表达式
  • 局部变量
  • 约会的捆绑（装订）

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

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

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

CommonJs摇树 

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

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

支持以下构造：

• exports|this|module.exports.xxx = ...
• exports|this|module.exports = require("...") （转口）
• exports|this|module.exports.xxx = require("...").xxx （转口）
• Object.defineProperty(exports|this|module.exports, "xxx", ...)
• require("abc").xxx
• require("abc").xxx()
• 从ESM引进
• require() 一个ESM模块
• 被标记的导出类型（对非严格ESM导入做特殊处理）：
  • Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })
  • exports|this|module.exports.__esModule = true|!0
• 未来计划支持更多的构造

当检测到不可分析的代码时，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选项现在比以前影响了更多关于生成代码的事情。

• 代码块加载方法
• 代码块的格式
• wasm加载方法
• 代码块与wasm在工人中加载方法
• 被使用的大致对象
• publicPath是否应该被自动确定
• 生成的代码中使用的ECMAScript特性/语法
• externals 是否预设被启用
• 一些Node.js的兼容层的行为（global，__filename，__dirname）
• 模块解析（browser基线，exports和imports条件）
• 一些加载器可能会基于此改变行为

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

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

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

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

• ["web", "node"] 将导致一个通用的代码块加载方法，而这个方法还没有实现。
• ["web", "node"]+output.module: true将导致一个模块代码块加载方法，该方法尚未实现。
• "web"会导致http(s):的引入被视为模块外部资源，而这些外部还没有实现（变通方法：externalsPresets.{ web: false, webAsync: true }，将使用代替import()）。

代码块分解与模块大小 

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

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，有以下改进：

• 追踪更多的依赖关系，某些丢失的文件。
• 别名可能有多种选择
• 可以现在为别名false了。
• 支持exports和imports主轴等功能。
• 性能提高

没有JS的代码块 

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

重大变更：未来计划 

实验特性 

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

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

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

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

• 旧的WebAssembly支持，就像webpack 4一样（experiments.syncWebAssembly）
• 根据更新的规范（experiments.asyncWebAssembly），添加WebAssembly支持。
  • 这使得一个WebAssembly模块成为一个异步模块。
• 顶层的Await第三阶段初步（experiments.topLevelAwait）
  • 在上方使用await使该模块成为一个异步模块。
• 以模块的形式生成代码包（experiments.outputModule）
  • 以此从代码包中移除了包装器IIFE，执行严格模式，通过<script type="module">进行懒惰加载，并在模块模式下最小化压缩。

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

最小的Node.js版本 

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

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

配置变更 

结构的变化 

• entry: {} 现在可以赋值一个空对象（允许使用插件来修改入口）。
• target 支持清单，版本及浏览器列表
• 移除了cache: Object：不能再设置内存缓存对象
• 添加了cache.type：现在可以在"memory"和"filesystem"间进行选择
• 在cache.type = "filesystem"时，增加了新配置项：
  • cache.cacheDirectory
  • cache.name
  • cache.version
  • cache.store
  • cache.hashAlgorithm
  • cache.idleTimeout
  • cache.idleTimeoutForIntialStore
  • cache.buildDependencies
• 添加了 snapshot.resolveBuildDependencies
• 添加了 snapshot.resolve
• 添加了 snapshot.module
• 添加了 snapshot.managedPaths
• 添加了 snapshot.immutablePaths
• 添加了resolve.cache：此选项可节省/启用安全的解析缓存
• 去除了 resolve.concord
• resolve.alias 值可以为堆积或 false
• 添加了resolve.restrictions：允许限制可能存在的结果
• 添加了resolve.fallback：允许为处理不了的别名请求设置降级
• 添加了resolve.preferRelative：允许处理模块请求
• 可移除针对于Node.js原生模块的自动polyfills
  • 去除了 node.Buffer
  • 去除了 node.console
  • 去除了 node.process
  • 可移除了node.*（Node.js原生模块）
  • 迁移：resolve.alias和ProvidePlugin。错误会给出提示（可以参考节点库浏览器，了解V4中填充工具和模拟的方式）
• output.filename 可以设置为函数
• 添加了 output.assetModuleFilename
• output.jsonpScriptType 更著名 output.scriptType
• devtool 更加严格
  • 格式化：false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
• 添加了 optimization.chunkIds: "deterministic"
• 添加了 optimization.moduleIds: "deterministic"
• optimization.moduleIds: "hashed" 已弃用
• 去除了 optimization.moduleIds: "total-size"
• 废弃了模块的flag并可删除了chunk id
  • 去除了 optimization.hashedModuleIds
  • 移除了optimization.namedChunks（NamedChunksPlugin太）
  • 移除了optimization.namedModules（NamedModulesPlugin太）
  • 去除了 optimization.occurrenceOrder
  • 迁移：使用chunkIds和moduleIds
• optimization.splitChunks test 不再匹配chunk名
  • 迁移：使用test函数
  (module, { chunkGraph }) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name")
• 添加了 optimization.splitChunks minRemainingSize
• optimization.splitChunks的filename可以设置为函数
• optimization.splitChunks 的大小现在可以设置为每个源类型大小的对象
  • minSize
  • minRemainingSize
  • maxSize
  • maxAsyncSize
  • maxInitialSize
• optimization.splitChunks中的maxAsyncSize和maxInitialSize添加了maxSize：允许为初始和异步chunk指定不同的maxSize
• 移除了optimization.splitChunks的name: true：不再支持自动命名
  • 迁移：使用重置值。chunkIds: "named"会为你的文件取一个有用的名字，盔甲于调试
• 添加了optimization.splitChunks.cacheGroups[].idHint：会建议提示，如果选择命名的chunk id
• 拆除了optimization.splitChunks的automaticNamePrefix
  • 迁移：使用idHint代替
• optimization.splitChunks的filename不再逐步初始块
• 添加了optimization.splitChunks的usedExports，盔甲在比较模块时约会使用过的export
• 添加了optimization.splitChunks.defaultSizeTypes：当使用数字表示size时，可以指定size的类型
• 添加了 optimization.mangleExports
• optimization.minimizer "..." 可以用于重新设定值
• optimization.usedExports "global" 增加了一个值，以允许在每个运行时中补充分析，而在分段范围内进行分享（性能更好）
• optimization.noEmitOnErrors更著名optimization.emitOnErrors，逻辑颠倒倒
• 添加了 optimization.realContentHash
• 去除了 output.devtoolLineToLine
  • 迁移：没有替代项
• 初步允许 output.chunkFilename: Function
• output.hotUpdateChunkFilename: Function 已被禁止：反正也没什么用。
• output.hotUpdateMainFilename: Function 已被禁止：反正也没什么用。
• output.importFunctionName: string指定为替换import()的名称，以允许在不支持的环境中进行
• 添加了output.charset：将其设置为false，会省略script标签上的charset属性
• output.hotUpdateFunction 更著名 output.hotUpdateGlobal
• output.jsonpFunction 更著名 output.chunkLoadingGlobal
• output.chunkCallbackFunction 更著名 output.chunkLoadingGlobal
• 添加了 output.chunkLoading
• 添加了 output.enabledChunkLoadingTypes
• 添加了 output.chunkFormat
• module.rules中的resolve和parser将以不同的方式进行合并（对象会进行深度合并，数组可能会使用"..."的形式来引用之前的值）
• 添加了module.rules parser.worker：允许为支持的worker添加配置
• module.rules中的query和loaders被除去
• 向module.rules中的options传递字符串的形式被废弃
  • 迁移：使用传递选项对象的方式代替，当不支持这种方式时，请在对应的loader中开启一个问题
• 添加了module.rules mimetype：允许匹配DataURI的mimetype
• 添加了module.rules descriptionData：允许匹配来自package.json中的数据
• module.defaultRules "..." 可以用于引用预设值
• 添加了stats.chunkRootModules：用于显示根模块的
• 添加了stats.orphanModules：用于显示为
• 添加了stats.runtime：用于显示runtime模块
• 添加了stats.chunkRelations：用于显示父母/孩子/兄弟姐妹的块
• 添加了stats.errorStack：用于显示追踪webpack内部的多个错误
• 添加了stats.preset：选择预设
• 添加了stats.relatedAssets：用于显示与其他资产相关的资产（如，SourceMaps）
• stats.warningsFilter 已被弃用，请改用 ignoreWarnings
• BannerPlugin.banner 签名已变更
  • 去除了 data.basename
  • 去除了 data.query
  • 迁移：从filename中电子杂志
• 拆除了SourceMapDevToolPlugin的lineToLine
  • 迁移：无可替代项
• [hash] 作为完整的编译hash值，引入被弃用
  • 迁移：使用[fullhash]代替，或最好替换其他hash选项
• [modulehash] 已被弃用
  • 迁移：使用[hash]代替
• [moduleid] 已被弃用
  • 迁移：使用[id]代替
• 去除了 [filebase]
  • 迁移：使用[base]代替
• 基于文件模板的新占位符（例如SourceMapDevToolPlugin）
  • [name]
  • [base]
  • [path]
  • [ext]
• 当给externals传递一个函数时，现在有一个不同的签名({ context, request }, callback)
  • 迁移：改变函数签名
• 添加了 externalsPresets
• 添加了experiments（见上述实验部分）
• 添加了 watchOptions.followSymlinks
• watchOptions.ignored 可以使用正则匹配
• 暴露了 webpack.util.serialization

默认值变更 

• 当browserslist配置可用时，target默认为"browserslist"
• module.unsafeCache现预设只对node_modules启用
• optimization.moduleIds在生产环境下预设为deterministic，而不再是size
• optimization.chunkIds在生产环境下预设为deterministic，而不再是total-size
• optimization.nodeEnv在none模式下，默认为false
• optimization.splitChunks.minSize 在生产环境下预设为 20k
• optimization.splitChunks.enforceSizeThreshold 在生产环境下预设为 50k
• optimization.splitChunks中的minRemainingSize在生产环境下预设为minSize
  • 这将导致在剩余部分过小的情况下，创造大量的
• optimization.splitChunks中的maxAsyncRequests和maxInitialRequests最小值值增加到了30
• optimization.splitChunks.cacheGroups.vendors 更著名 optimization.splitChunks.cacheGroups.defaultVendors
• optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk 默认为 true
• optimization.minimizer 的target默认在terser选项中使用 compress.passes: 2
• 当使用cache时，resolve(Loader).cache预设为true
• resolve(Loader).cacheWithContext 默认为 false
• resolveLoader.extensions 去除了 .json
• node.global中的node.__filename和node.__dirname替代为false
• stats.errorStack 默认为 false

加载器相关变更 

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） 

• Compilation.modules现在是一个集合
• Compilation.chunks现在是一个集合
• Chunk.files现在是一个集合

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

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

编译文件系统信息 

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

后续，会增加访问文件内容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已被删除，现在可以使用异步替换处理，每个步骤都有独立的变量：

• Compilation.factorizeQueue：为一组依赖性调用模块工厂。
• Compilation.addModuleQueue：将模块添加到编译子系统中（可以使用缓存恢复模块）
• Compilation.buildQueue：必要时重建模块（可将模块存储到缓存中）
• Compilation.rebuildQueue：如需手动触发，逐步重新构建模块
• Compilation.processDependenciesQueue：处理模块的依赖项。

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

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

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

记录中 

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

模块和chunk图 

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

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

• 模块连接-> ModuleGraph
• 模块发行者-> ModuleGraph
• 模块优化救助-> ModuleGraph（待办事项：检查是否应使用ChunkGraph代替）
• 使用的模块导出-> ModuleGraph
• 提供的模块导出-> ModuleGraph
• 模块预购索引-> ModuleGraph
• 模块后订单索引-> ModuleGraph
• 模块深度-> ModuleGraph
• 模块配置文件-> ModuleGraph
• 模块ID-> ChunkGraph
• 模块哈希-> ChunkGraph
• 模块运行时要求-> ChunkGraph
• 模块在块中-> ChunkGraph
• 模块在块中输入-> ChunkGraph
• 模块是块中的运行时模块-> ChunkGraph
• 块运行时要求-> 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的信息，

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

• 是否使用出口？是否使用并不确定。（详见optimization.usedExports）
• 是否提供出口？是否提供并不确定。（详见optimization.providedExports）
• 能否重命名export名？是否重命名，也不确定
• 如果导出已重新命名，则为新名称。（详见optimization.mangleExports）
• 嵌入的ExportsInfo，如果export是一个包含附加信息的对象，那么它本身就是一个对象
  • 用于重新导出命名空间对象：import * as X from "..."; export { X };
  • 用于表示JSON模块中的结构

代码生成阶段 

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

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

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

依赖关系参考 

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

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

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

• 引用的模块可以从ModuleGraphConnection中读取
• 约会的导出名，可以通过Dependency.getReferencedExports()获取
• Dependency的类上会有一个weak的标志
• 排序只与HarmonyImportDependencies相关，可以通过sourceOrder属性获取

表示依赖 

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

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

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

弃用的装载机 

• null-loader

  已被弃用。使用

  module.exports = {
    resolve: {
      alias: {
        xyz$: false,
      },
    },
  };

  或者使用绝对路径

  module.exports = {
    resolve: {
      alias: {
        [path.resolve(__dirname, '....')]: false,
      },
    },
  };

微小冲突 

• Compiler.name：当生成带有绝对路径的编译器名称时，请确保名称使用|或!分隔。
  • 使用空间作为分隔符的做法逐步不再适用。（路径可以保护空间）
  • 温馨提示：在Stats中输出时|会被替换为空格。
• SystemPlugin 投放被排除在外。
  • 迁移：应避免使用它，因为此规范已被删除。您可以使用Rule.parser.system: true来重新启用它。
• ModuleConcatenationPlugin：DependencyVariables已被移除，将不再阻止连接。
  • 这意味着它现在可以在module，global，process或ProvidePlugin的情况下进行连接。
• 去除了 Stats.presetToOptions
  • 迁移：使用compilation.createStatsOptions代替
• 去除了SingleEntryPlugin和SingleEntryDependency
  • 迁移：使用EntryPlugin和EntryDependency代替
• chunk现在可以有多个入口
• 去除了 ExtendedAPIPlugin
  • 迁移：不再需要此插件，在必要时，你可以使用__webpack_hash__和__webpack_chunkname__注入运行时代码。
• ProgressPlugin不再为reportProgress使用tapable一部分。
  • 迁移：使用ProgressPlugin.getReporter(compiler)代替
• 投放对.mjs文件重新启用ProvidePlugin
• Statsjson中的errors和warnings不再是字符串类型，或者包含必要信息的对象，这些信息会被分割为熟悉。
  • 迁移：查阅具体属性信息，如message转变
• 去除了 Compilation.hooks.normalModuleLoader
  • 迁移：使用NormalModule.getCompilationHooks(compilation).loader代替
• 将NormalModuleFactory中的hook从Waterfall更改为bailing，修改瀑布函数的hook进行了重命名操作。
• 去除了 compilationParams.compilationDependencies
  • 插件可以在编译中使用compilation.file/context/missingDependencies添加依赖关系
  • Compat层将compilationDependencies.add委托给fileDependencies.add。
• stats.assetsByChunkName[x] 始终为一个摘要
• 增加了__webpack_get_script_filename__函数用于获取脚本文件的文件名。
• 在的package.json中"sideEffects"将使用glob-to-regex来代替micromatch处理。
  • 这可能会改变边缘案例的语义。
• 从IgnorePlugin中移除移除了checkContext
• 全新的__webpack_exports_info__API允许导出使用自省。
• SourceMapDevToolPlugin引入适用于非chunk资源。
• 当引用的env变量缺失且没有降级数据时，EnvironmentPlugin当前会展示一个错。
• 从架构中可移除serve熟悉。

其他微小幅度 

• 可删除内置目录，用运行时代替内置目录
• 可移除不适用的特性
  • BannerPlugin目前只支持一个参数，这个参数可以是对象，字符串或函数
• 可拆卸 CachePlugin
• Chunk.entryModule 已弃用，使用ChunkGraph代替
• Chunk.hasEntryModule 已弃用
• Chunk.addModule 已弃用
• Chunk.removeModule 已弃用
• Chunk.getNumberOfModules 已弃用
• Chunk.modulesIterable 已弃用
• Chunk.compareTo 已弃用
• Chunk.containsModule 已弃用
• Chunk.getModules 已弃用
• Chunk.remove 已弃用
• Chunk.moveModule 已弃用
• Chunk.integrate 已弃用
• Chunk.canBeIntegrated 已弃用
• Chunk.isEmpty 已弃用
• Chunk.modulesSize 已弃用
• Chunk.size 已弃用
• Chunk.integratedSize 已弃用
• Chunk.getChunkModuleMaps 已弃用
• Chunk.hasModuleInGraph 已弃用
• Chunk.updateHash 签名已变更
• Chunk.getChildIdsByOrders签名已变更（TODO：考虑移至ChunkGraph）
• Chunk.getChildIdsByOrdersMap签名已变更（TODO：考虑移至ChunkGraph）
• 去除了 Chunk.getChunkModuleMaps
• 去除了 Chunk.setModules
• 去除了废弃的Chunk方法
• 添加了 ChunkGraph
• 去除了 ChunkGroup.setParents
• 去除了 ChunkGroup.containsModule
• 去Compilation.cache除了，改用Compilation.getCache()
• ChunkGroup.remove 不再导致该集团与block的连接
• ChunkGroup.compareTo 签名已变更
• ChunkGroup.getChildrenByOrders 签名已变更
• ChunkGroup 的索引和索引
  • 废弃了
• ChunkTemplate.hooks.modules 签名已变更
• ChunkTemplate.hooks.render 签名已变更
• ChunkTemplate.updateHashForChunk 签名已变更
• 去除了 Compilation.hooks.optimizeChunkOrder
• 去除了 Compilation.hooks.optimizeModuleOrder
• 去除了 Compilation.hooks.advancedOptimizeModuleOrder
• 去除了 Compilation.hooks.optimizeDependenciesBasic
• 去除了 Compilation.hooks.optimizeDependenciesAdvanced
• 去除了 Compilation.hooks.optimizeModulesBasic
• 去除了 Compilation.hooks.optimizeModulesAdvanced
• 去除了 Compilation.hooks.optimizeChunksBasic
• 去除了 Compilation.hooks.optimizeChunksAdvanced
• 去除了 Compilation.hooks.optimizeChunkModulesBasic
• 去除了 Compilation.hooks.optimizeChunkModulesAdvanced
• 去除了 Compilation.hooks.optimizeExtractedChunksBasic
• 去除了 Compilation.hooks.optimizeExtractedChunks
• 去除了 Compilation.hooks.optimizeExtractedChunksAdvanced
• 去除了 Compilation.hooks.afterOptimizeExtractedChunks
• 添加了 Compilation.hooks.stillValidModule
• 添加了 Compilation.hooks.statsPreset
• 添加了 Compilation.hooks.statsNormalize
• 添加了 Compilation.hooks.statsFactory
• 添加了 Compilation.hooks.statsPrinter
• Compilation.fileDependencies，Compilation.contextDependencies以及Compilation.missingDependencies现在发生了
• 去除了 Compilation.entries
  • 迁移：使用Compilation.entryDependencies代替
• 去除了 Compilation._preparedEntrypoints
• dependencyTemplates初步转变DependencyTemplates的class类型，而不再是原始的Map
• 去除了Compilation.fileTimestamps和contextTimestamps
  • 迁移：使用Compilation.fileSystemInfo代替
• 去除了 Compilation.waitForBuildingFinished
  • 迁移：使用新实力
• 去除了 Compilation.addModuleDependencies
• 去除了 Compilation.prefetch
• Compilation.hooks.beforeHash 会在创建模块hash值后被调用。
  • 迁移：使用Compiliation.hooks.beforeModuleHash代替
• 去除了 Compilation.applyModuleIds
• 去除了 Compilation.applyChunkIds
• 添加了Compiler.root，用于指向根编译器
  • 可用于缓存WeakMaps中的数据，而非静态作用域内的数据
• 添加了 Compiler.hooks.afterDone
• Source.emitted 不再由编译器设置
  • 迁移：使用Compilation.emittedAssets代替
• 添加了Compiler/Compilation.compilerPath：此为编译器在编译器树中唯一名称（在根编译器范围内唯一）
• Module.needRebuild 已弃用
  • 迁移：使用Module.needBuild代替
• Dependency.getReference 签名已变更
• Dependency.getExports 签名已变更
• Dependency.getWarnings 签名已变更
• Dependency.getErrors 签名已变更
• Dependency.updateHash 签名已变更
• 去除了 Dependency.module
• 添加了DependencyTemplate的基类
• 去除了 MultiEntryDependency
• 添加了 EntryDependency
• 去除了 EntryModuleNotFoundError
• 去除了 SingleEntryPlugin
• 添加了 EntryPlugin
• 添加了 Generator.getTypes
• 添加了 Generator.getSize
• Generator.generate 签名已变更
• 添加了 HotModuleReplacementPlugin.getParserHooks
• Parser被移至JavascriptParser中
• ParserHelpers被移至JavascriptParserHelpers中
• 去除了 MainTemplate.hooks.moduleObj
• 去除了 MainTemplate.hooks.currentHash
• 去除了 MainTemplate.hooks.addModule
• 去除了 MainTemplate.hooks.requireEnsure
• 去除了 MainTemplate.hooks.globalHashPaths
• 去除了 MainTemplate.hooks.globalHash
• 去除了 MainTemplate.hooks.hotBootstrap
• MainTemplate.hooks 部分签名已变更
• Module.hash 已弃用
• Module.renderedHash 已弃用
• 去除了 Module.reasons
• Module.id 已弃用
• Module.index 已弃用
• Module.index2 已弃用
• Module.depth 已弃用
• Module.issuer 已弃用
• 去除了 Module.profile
• 去除了 Module.prefetched
• 去除了 Module.built
• 去除了 Module.used
  • 迁移：使用Module.getUsedExports代替
• Module.usedExports已弃用
  • 迁移：使用Module.getUsedExports代替
• Module.optimizationBailout 已弃用
• 去除了 Module.exportsArgument
• Module.optional 已弃用
• 去除了 Module.disconnect
• 去除了 Module.unseal
• 去除了 Module.setChunks
• Module.addChunk 已弃用
• Module.removeChunk 已弃用
• Module.isInChunk 已弃用
• Module.isEntryModule 已弃用
• Module.getChunks 已弃用
• Module.getNumberOfChunks 已弃用
• Module.chunksIterable 已弃用
• 去除了 Module.hasEqualsChunks
• Module.useSourceMap 被移至 NormalModule
• 去除了 Module.addReason
• 去除了 Module.removeReason
• 去除了 Module.rewriteChunkInReasons
• 去除了 Module.isUsed
  • 迁移：使用isModuleUsed，isExportUsed和getUsedName代替
• Module.updateHash 签名已变更
• 去除了 Module.sortItems
• 去除了 Module.unbuild
  • 迁移：使用invalidateBuild代替
• 添加了 Module.getSourceTypes
• 添加了 Module.getRuntimeRequirements
• Module.size 签名已变更
• ModuleFilenameHelpers.createFilename 签名已变更
• ModuleProfile 的课程添加了许多数据
• 去除了 ModuleReason
• ModuleTemplate.hooks 签名已变更
• ModuleTemplate.render 签名已变更
• 去除了 Compiler.dependencies
  • 迁移：使用MultiCompiler.setDependencies代替
• 去除了 MultiModule
• 去除了 MultiModuleFactory
• NormalModuleFactory.fileDependencies，NormalModuleFactory.contextDependencies和NormalModuleFactory.missingDependencies前置使用LazySets
• RuntimeTemplate方法过渡使用runtimeRequirements的参数
• 可移除了serve属性
• 去除了 Stats.jsonToString
• 去除了 Stats.filterWarnings
• 去除了 Stats.getChildOptions
• 去除了Stats的helper方法
• Stats.toJson 签名已变更（参数二被删除）
• 去除了 ExternalModule.external
• 去除了 HarmonyInitDependency
• Dependency.getInitFragments 已弃用
  • 迁移：使用apply initFragements代替
• DependencyReference现将函数传递给模块，而非模块。
• 去除了 HarmonyImportSpecifierDependency.redirectedId
  • 迁移：使用setId代替
• 橡子5-> 8
• 测试
  • HotTestCases现可为多个目标运行，包括 async-node node web webworker
  • TestCases现在可以用store: "instant"和store: "pack"来运行系统缓存。
  • TestCases现在也可以为指定的模块id运行。
• 工具添加了import的排序功能（在CI检查）
• 当chunk的名称与id等价时，运行时的chunk名称映射不再包含入口
• 将resolvedModuleId resolvedModuleIdentifier和resolvedModule添加到Stats的原因中，在完成作用域提升等优化之前，这些原因指向模块
• 在Stats toString的输出中展示 resolvedModule
• loader-runner已升级：https : //github.com/webpack/loader-runner/releases/tag/v3.0.0
• Compilation中的file/context/missingDependencies因性能问题不再排序
  • 不要依赖排序
• webpack-sources升级至版本2：https : //github.com/webpack/webpack-sources/releases/tag/v2.0.1
• 删除了对webpack-command的支持
• 使用schema-utils @ 2进行模式验证
• Compiler.assetEmitted 改进了参数二，增加了更多信息
• BannerPlugin省略了尾部的空白字符
• 从LimitChunkCountPlugin中移除移除了minChunkSize选项对话
• 将与javascript相关的文件重组到子目录中
  • webpack.JavascriptModulesPlugin -> webpack.javascript.JavascriptModulesPlugin
• 添加了 Logger.getChildLogger
• 将DllPlugin中条目仅选项的替代值变更为true
• 可移除的特殊请求的简化逻辑，使用单个的相对路径作为替代模块的名称
• 允许webpack：//将SourceMaps中的url改为相对于webpack根目录的路径
• 添加了API用于生成和处理针对webpack配置的CLI参数
• 当使用System.js作为libraryTarget时，在System中添加__system_context__作为一部分
• 为DefinePlugin添加bigint的支持
• 对基本入门添加bigint的支持，例如maths
• 可移除在创建hash后修改编译hash的功能
• 移除了HotModuleReplacementPlugin的multiStep模式
• 当使用嵌入的对象或时序时，emitAsset中的assetInfo将被合并
• 当基于filename生成路径时，[query]是一个有效占位符，如资产
• 添加了Compilation.deleteAsset，用于正确删除资产和非公共的相关资源
• 将require("webpack-sources")暴露为require("webpack").sources
• 终结者5
• 当Webpack作为句首时，Webpack的W应该大写

   详情见webpack官网 webpack5发布公告

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。