关于javascript:webpack5新特性中文翻译

30次阅读

共计 35837 个字符，预计需要花费 90 分钟才能阅读完成。

前言

都是我从官网文档里拼本人了解翻译过去的, 借助翻译工具应该大略解析进去, 然而能力强的还是倡议间接查看文档, 毕竟我也不强, 怕误导意思

changelog-v5

大方向

这一公布集中在以下方面:

  • 咱们尝试通过长久缓存来进步构建性能。
  • 咱们尝试用更好的算法和默认值来改良长期缓存。
  • 咱们试图通过更好地 Tree Shaking 和生成代码来改良 bundle(捆绑包)的大小。
  • 咱们试图改良对 web 平台的兼容性。
  • 在实现 v4 中的个性而不引入任何破坏性更改的同时，咱们试图清理处于奇怪状态的内部结构。
  • 咱们试图通过当初引入破坏性的更改来为未来的个性做筹备，让咱们尽可能长时间地停留在 v5 上。

迁徙指南

=> see here for a migration guide <=

重大变动: 删除

移除已弃用的性能

所有在 v4 中被废除的性能都被移除。

迁徙: 确保你的 webpack4 我的项目没有打印弃用正告

这也有一些被废除然而在 v4 中没有打印正告的货色

  • IgnorePlugin 和 BannerPlugin 当初只能通过一个参数传递, 它能够是一个对象, 字符串或者函数

废除代码

新的废除包含一个依赖代码以便于他们更容易被援用

废除语法

require.include曾经被废除, 当应用的时候会默认收回正告

能够应用 Rule.parser.requireInclude 去扭转行为: 容许, 废除或者禁止

移除 Nodejs 主动引入 Polifills

在晚期的时候,webpack 的指标是容许大多数的 nodejs 模块在浏览器中运行, 然而随着模块格局的扭转, 当初许多的模块应用都是为了前端的目标而编写,v<= 4 为许多的 nodejs 外围模块提供填充, 一旦一个模块应用了任何的外围模块就会主动利用这些填充(i.e. the crypto module).

尽管这使应用为 nodejs 而编写的模块变得更简略, 然而它增加了微小的填充到 bundle 中, 但大多数状况下它们并不是必要的

v5 进行主动填充这些模块而专一于前端兼容模块

迁徙:

  • 尽可能应用前端兼容模块
  • 能够手动给 nodejs 外围模块增加填充, 一个谬误音讯将给出如何实现这一点的提醒。
  • 包作者: 应用 package 中的 browser 字段让包兼容, 为浏览器提供代替的实现 / 依赖关系

次要变动: 长期缓存

Deterministic Chunk, Module IDs and Export names

新增新的算法去实现长期缓存. 这在生产环境被默认启用

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

这算法以确定的形式将短 (3 或 4 字节) 数字 IDs 调配给模块和快, 短 (2 字节) 名称调配给导出, 这是在块体积和长期缓存之间的衡量.

moduleIds/chunkIds/mangleExports: false禁止默认行为, 能够通过插件提供自定义算法。. 留神在 v4 中 moduleIds/chunkIds: false 没有自定义插件进行工作构建, 而在 v5 你必须提供一种

迁徙: 最好是应用chunkIds, moduleIds andmangleExports, 你也能够选择性应用旧的默认值: chunkIds: "size", moduleIds: "size", mangleExports: "size", 这会生成更小的块, 然而更常让长期缓存生效

留神: 在 v4 哈希模块 id 升高了 gzip 的性能, 这与更改的模块命令无关, 曾经被修复了

留神: 在 v5deterministicid 在生产环境默认被启用

Real Content Hash

v5 当初当应用 [contenthash] 会应用文件内容的真正散列, 在此之前只是应用内部结构的散列, 这只有在正文扭转或者变量重命名才会对长期缓存产生踊跃影响. 而这些更改在压缩之后是不可见的

次要变动: 开发反对

Named Chunk IDs

开发模式中默认启用的新命名块 id 算法为块 (和文件名) 提供可读的名称。模块 ID 是由其绝对于上下文的门路决定的。块 ID 由块的内容决定。

这样你就不必再用 import(/* webpackChunkName: "name" */ "module") 去调试, 然而，如果您心愿为生产环境管制文件名，那么它依然是有意义的。

在生产环境中能够应用 chunkIds:“named”，但要确保不要意外地裸露无关模块名称的敏感信息。

迁徙: 如果您不喜爱在开发中更改文件名，您能够通过 chunkIds: "natural"来应用旧的数字模式。

Module Federation

Webpack 5 减少了一个名为“模块联结”的新个性，它容许多个 Webpack 构建版本一起工作。从运行时的角度来看，造成多个构建的模块就像一个微小的连贯模块图。从开发人员的冀望模块能够从指定的近程构建导入和应用最小的限度。

For more details see this separate guide.

次要变动: 新的网络平台性能

JSON 模块

JSON 模块当初与标准统一, 如果应用了非默认导出会收回正告.JSON 模块从严格的 EcmaScript 模块导入的时候不再有命名导出

迁徙: 应用默认导出

优化 optimization.usedExports 删除未应用的属性, 优化 optimization.mangleExports 没有逻辑的属性

能够在 Rule.parser.parse 指定自定义的 JSON 序列化去引入类 JSON 文件(例如 toml、yaml、json5 等)。

Asset 模块

v5 当初原生反对资源模块, 这些模块要么将文件发送到输入文件夹中，要么将 DataUri 注入到 javascript 包中。无论哪种形式，它们都提供一个 URL 来应用。

它们可能经由多种形式应用

  • import url from "./image.png", 当匹配这些引入的时候须要在 module.rules 设置type: "asset"
  • new URL("./image.png", import.meta.url)

所抉择的语法也容许在不应用 bundler 的状况下运行代码。

import.meta

  • import.meta.webpackHot 是 module.hot 的别名, 能够在严格模式下执行
  • import.meta.webpack 是 webpack 的主版本号
  • import.meta.url 是以后文件的 file: url (相似 __filename不过是作为文件门路)

原生 Worker 反对

当将资源的新 URL 与 new Worker/new SharedWorker/navigator.serviceWorker.register 组合时。webpack 将主动为 web worker 创立一个新的入口点。

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

所抉择的语法也容许在不应用 bundler 的状况下运行代码。

Uris

Webpack 5 反对解决申请中的协定。

  • data: 反对 Base64 或者被反对的原始编码. 在module.rulesMimetype 能够被映射到加载器和模块类型 . 例如: import x from "data:text/javascript,export default 42"
  • file:反对
  • http(s): 反对, 但须要抉择通过 new webpack.experiments.schemesHttp(s)UriPlugin()

反对申请中的片段: 例如: ./file.js#fragment

异步模块

v5 反对所谓的 ” 异步模块 ”, 这些模块不是同步计算的，而是异步和基于 promise 的

经由 import 引入它们会被主动解决不须要额定的语法, 而且简直不存在显著的差别

经由 require 引入它们会返回 promise 导出解析

在 webpack 有多种应用异步模块的形式

  • async externals
  • WebAssembly Modules in the new spec
  • EcmaScript Modules that are using Top-Level-Await

Externals

Webpack 5 减少了额定的 external 类型以涵盖更多的应用程序:

promise: 一种表白后果的承诺, 内部模块是一个异步模块，解析后的值用作模块导出。

import: 原生 import 应用做加载指定的申请, 而 external 模块是一种异步模块

script: 经由 <script> 加载一个 url 取得全局的导出变量(可选属性), external 模块是一种异步模块

次要变动: 新的 Node.js 生态系统个性

Resolving

package.json 中的 exports和 import 字段当初反对。

Yarn PnP is supported natively.

See more details in TODO.

次要变动: 开发教训

Improved target

Webpack 5 容许传递指标列表，也反对指标的版本。

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

这是一个提供 webpack 须要确定的所有信息的简略办法:

  • chunk loading mechnism, and
  • 反对像箭头函数等语法

Stats

测试数据格式曾经改良可读性和简短性, 默认值曾经失去了改良，变得更简洁，也更适宜大型构建。

  • 默认暗藏 chunk 之间的关系. 能够通过 stats.chunkRelations切换.
  • 当初的统计数据能够辨别 files 和auxiliaryFiles .
  • 默认暗藏 module 和 chunk 的 id. 能够通过 stats.ids切换.
  • 所有模块的列表当初都是会按门路到入口 (distance to entrypoint) 排序. 能够通过 stats.modulesSort切换..
  • 所有 chunk 的列表当初都是会按模块名排序. 能够通过 stats.chunkModulesSort切换.
  • 在 concatenated modules 里的所有内嵌模块的列表当初都是会按 topologically 排序.. 能够通过 stats.nestedModulesSort 切换.
  • Chunks 和 Assets show chunk id 提醒
  • Assets and modules 会显示成 tree 取代 list/table.
  • 个别的材料当初在最初的摘要中显示。它显示 webpack 版本，配置名和正告 / 谬误计数。
  • Hash 默认暗藏. 能够通过 stats.hash切换.
  • 构建工夫戳默认不再显示. 能够通过 stats.builtAt启用. 它将在摘要中显示工夫戳。
  • 子 compilations 默认不再显示. 能够显示在stats.children.

Progress

CLI --progress 应用的`ProgressPlugin 曾经做了一些改良, 但也能够作为插件手动应用。

它过来只计算解决过的模块。当初它能够计算 entries dependencies and modules。所有这些当初都默认显示。

它用于显示以后解决的模块。这导致了很多规范谬误输入，并在一些管制台上产生了性能问题。当初默认状况下禁用(activeModules 选项)。这也缩小了垃圾信息的数量在控制台。当初，在构建模块期间写入规范谬误的工夫被限度为 500ms。

剖析模式也失去了降级，并将显示嵌套进度音讯的工夫。这使得插件造成性能问题时更容易发现。

一种新的增加选项 percentBy 通知 ProgressPlugin 怎么计算进度比

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

为了使进度百分比更精确，ProgressPlugin 缓存最初已知的模块总数，并在下一次构建中重用这个值。第一个版本将预热缓存，但接下来的版本将应用并更新这个值。

Automatic unique naming

在 webpack 4 中，多个 webpack 运行时可能在同一个页面上发生冲突, 因为它们应用雷同的全局变量来加载块。要解决这个问题，须要为输入提供一个自定义名称 output.jsonpFunction 配置。

Webpack 5 会主动从 package.json name 推断出构建的惟一名称。并将其作为 output.uniqueName 的默认值。

此值用于使所有潜在抵触的全局变量惟一。

迁徙: 思考删除output.jsonpFunction

Automatic public path

容许的状况下 v5 会主动决定output.publicPath

Typescript typings

v5 会从源码生成 Typescript typings 通过 npm 包裸露

迁徙: 删除@types/webpack。当名称不同时更新援用。

重大变动: 优化

Nested tree-shaking

webpack 当初可能跟踪拜访导出的嵌套属性的拜访。这能够在从新导出名称空间对象时改良 tree-shaking(打消未应用和凌乱的导出)。

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

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

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

在本例中，能够在生产模式中删除导出 b。

Inner-module tree-shaking

webpack 4 没有剖析模块导出和导入之间的依赖关系。webpack 5 有一个新的选项优化 optimization.innerGraph 在生产模式中默认启用，它对模块中的符号运行剖析，以找出从导出到导入的依赖关系。

像这种模块

import {something} from "./something";

function usingSomething() {return something;}

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

外部图算法将计算出只有在应用测试导出时才应用某些内容, 这能够标记更多未应用的导出并且从块中删除
当设置 sideEffects": false 会删除更多的模块, 在这例子 ./something 当测试模块未应用会被删除
须要配置 optimization.unusedExports 去取得更多对于未应用导出的信息
上面的符号会被剖析

  • function declarations
  • class declarations

  • export default

    • with or variable declarations with
    • function expressions
    • class expressions
    • sequence expressions
    • /*#__PURE__*/ expressions
    • local variables
    • imported bindings

反馈: 如果你发现在这个剖析中有什么缺失，请报告一个问题，咱们思考减少它。

应用 eval()将对模块进行此优化，因为 evaled 代码能够援用范畴内的任何符号。

这种优化也称为深度范畴剖析。

CommonJs Tree Shaking

webpack 在剖析 CommonJs 导出和 require()调用时，能够抉择不加入导出。

webpack 5 减少了对一些 CommonJs 结构的反对，容许打消未应用的 CommonJs 导出，并从 require()调用中跟踪援用的导出名称。

持以下结构:

  • exports|this|module.exports.xxx = ...
  • exports|this|module.exports = require("...") (reexport)
  • exports|this|module.exports.xxx = require("...").xxx (reexport)
  • Object.defineProperty(exports|this|module.exports, "xxx", ...)
  • require("abc").xxx
  • require("abc").xxx()
  • importing from ESM
  • require() a ESM

  • flagged exportType (special handling for non-strict ESM import):

    • Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0})
    • exports|this|module.exports.__esModule = true|!0

当检测到不可剖析的代码时，webpack 会主动退出，并且齐全不跟踪这些模块的导出信息(出于性能起因)。

Optimization per runtime

Webpack 5 当初可能 (在默认状况下) 剖析和优化每个运行时模块(一个运行时通常等于一个入口点)。这容许仅在真正须要导出的入口点中导出。入口点不会相互影响(只有每个入口点应用运行时)

Module Concatenation

模块连贯也实用于每个运行时，以容许对每个运行时进行不同的连贯。

模块连贯曾经成为第一类公民，任何模块和依赖项当初都能够实现它。最后 webpack 5 曾经减少了对外部模块和 json 模块的反对，很快就会推出更多。

General Tree Shaking improvements

export * 曾经改进到跟踪更多的信息并且不再标记 default导出应用

export * 当 webpack 检测到抵触导出的时候展现正告

import() 容许经由神奇的正文 /* webpackExports: ["abc", "default"] */ 手动 tree shake 模块

Development Production Similarity

咱们试图通过改良两种模式之间的相似性，在开发模式下的构建性能和防止仅用于生产的问题之间找到一个好的折衷。

Webpack 5 在这两种模式下都默认启用了 sideEffects 优化。在 webpack 4 中，因为 package.json 中不正确的“副作用”标记，这种优化导致了一些仅用于生产的谬误。在开发中启用这种优化能够更快更容易地找到这些问题。

在许多状况下，开发和生产产生在不同的操作系统上，文件系统的大小写敏感性也不同，所以 webpack 5 在呈现奇怪的大小写问题时减少了一些正告 / 谬误。

Improved Code Generation

当初在输入中有一些选项。当初的环境。它们容许指定哪个 EcmaScript 个性能够用于 webpack 生成的运行时代码。

通常不间接指定该选项，而是应用 target 选项。

webpack 4 过来只收回 ES5 代码。webpack 5 当初能够同时生成 ES5 和 ES6/ES2015 代码。

只反对古代浏览器将应用箭头函数生成更短的代码，应用 const 申明生成更多的 spec-comform 代码，应用 TDZ 作为导出默认值。

Improved target option

在 webpack 4 中，target 是在“web”和“node”(以及其余一些)之间做出十分毛糙的抉择。Webpack 5 提供了更多的选项。

指标选项当初对生成代码的影响比以前更多:

  • chunk 加载办法
  • chunks 格局
  • wasm 加载办法
  • chunk 办法和 wasm 加载 in workers
  • 全局对象应用
  • 是否应该主动确定 publicPath
  • 个别代码应用的 EcmaScript 性能 / 语法
  • 默认启用externals
  • 一些 nodejs 兼容层的行为 (global, __filename, __dirname)
  • 模块解析(browser field, exports and imports 条件)
  • 一些加载器可能会基于此扭转行为

在 web 和node之间做出对于这些事件的抉择十分毛糙, 咱们须要更多信息. 因而，咱们容许指定最小版本，例如“node10.13”，并推断无关指标环境的更多属性。
当初容许应用一个数组合并多个 target.webpack 会决定所有 target 的最低属性配置, 当应用不提供残缺信息的指标 (如“web”或“节点”(没有版本号)) 时，应用数组也很有用。例如 ["web", "es2020"] 联合这两个局部指标。

有一个指标“browserslist”，它将应用 browserslist 数据来确定环境的属性。当我的项目中有可用的 browserslist 配置时，默认也会应用此指标。当没有可用的配置时，“web”指标将被默认应用。

有些组合和个性尚未实现，将导致谬误。它们是为未来的个性做筹备。例子:

  • ["web", "node"] 将导致一个通用的块加载办法，这是尚未实现
  • ["web", "node"] + output.module: true 将导致模块块加载办法，这是尚未实现
  • "web" 将会导致 http(s): 导入被视为内部模块, 这是尚未实现 (应变方法: externalsPresets: {web: false, webAsync: true}, 这会应用 import() 代替).

SplitChunks and Module Sizes

模块当初以一种比显示单个数字更好的形式示意大小。此外，当初有不同类型的尺寸。

SplitChunksPlugin 当初晓得怎么用 minSize 和maxSize去解决那些不同尺寸, 默认只有 Javascript 尺寸会被解决, 不过你能够用多个值去治理他们

minSize: {
  javascript: 30000,
  style: 50000,
}

迁徙: 查看构建中应用的大小类型，并在 splitChunks 中配置它们。minSize和 splitChunks.maxSize 可选。

重大变动: 性能

Persistent Caching

这是一种文件系统缓存, 能够选择性的再以下配置应用

cache: {
  // 1. Set cache type to filesystem
  type: "filesystem",
  
  buildDependencies: {
    // 2. Add your config as buildDependency to get cache invalidation on config change
    config: [__filename]
  
    // 3. If you have other things the build depends on you can add them here
    // Note that webpack, loaders and all modules referenced from your config are automatically added
  }
}

重要提醒:

默认状况下，webpack 假如只有包管理器批改了 webpack 所在的 node_modules 目录。node_modules跳过了散列和工夫戳。相同，出于性能起因，只应用包名和版本, 符号链接 (如 npm/yarn link) 是好的。不要间接编辑 node_modules 中的文件，除非您抉择不应用 snapshot.immutablePaths: [] 进行此优化。当应用 Yarn PnP webpack 假如 yarn 缓存是不可变的 (它通常是)。您能够应用snapshot.immutablePaths: [] 抉择退出此优化。

缓存将存储在 node_modules/.cache/webpack(当应用 node_modules 时)resp. .yarn/.cache/webpack(当应用 Yarn PnP 时)。你可能永远都不须要手动删除它。
许多外部插件也会应用长久缓存。示例:SourceMapDevToolPlugin(缓存生成的 SourceMap)，ProgressPlugin(缓存大量模块)
长久缓存将依据应用状况主动创立多个缓存文件，以优化对缓存的读写访问。

Compiler Idle and Close

Compiler 当初须要在应用完之后敞开,Compiler 在进入和来到 idle 的时候有针对它们状态的钩子, 插件可能用这些钩子去做不重要的工作(例如, 把长久缓存缓缓地存储到硬盘). 在 Compiler 敞开之后 – 所有剩下的工作会被尽可能快的实现, 一个回调信号示意完结.

插件和它们各自的作者应该预料到一些使用者可能会遗记去敞开 Compiler, 所以, 所有工作最终应该都在 idle 阶段实现. 当工作实现的时候应该阻止过程退出.

webpack() 在被传递回调时主动调用 close。

迁徙: 在应用 node.js API 时，确保调用 Compiler.close 后敞开。

File Emitting

webpack 通常会在第一次构建期间 emit 所有的输入文件而在前面的增量构建 (监听) 会跳过写入没扭转的文件, 假设 webpack 运行期间没有其余货色扭转输入文件

随着长久缓存的减少，即便在重启 webpack 过程时，也应该提供 watch-like 的体验，然而，如果认为即便在 webpack 不运行的状况下，也没有其余货色扭转输入目录，那就太过分了。

所以当初 webpack 当初会检测在输入目录的现有文件并将它们的内容与内存中的输入文件进行比拟, 只有当它们扭转的时候才会写入文件, 这只会在第一次构建实现, 任何增量构建总是在 webpack 运行过程生成新的资源写入文件

咱们假设 webpack 和插件只有在内容产生扭转才会生成新的资源, 缓存应该确保当输出是相等的时候没有新的资源生成, 不听从这个倡议会升高性能

文件被标记immutable(包含内容 hash), 当已存在雷同名字的文件的时候将永远不会被写入, 咱们假设当文件内容扭转的时候内容 hash 会被扭转, 这通常是对的, 但在 webpack 或者插件开发阶段不总是正确

次要变动: 长期悬而未决的问题

Node.js target

在 webpack 4 中，一些个性是不可用的，例如 Node.js 指标。其中一些当初曾经能够了。

因为无奈加载多个初始文件，node.js 不能在初始块中进行 SplitChunks。当初是可能的。入口文件当初将加载附加文件和运行时 chunk。

SplitChunks for single-file-targets

只容许启动单个文件的指标 (如 node、WebWorker、electron main) 当初反对由运行时主动加载疏导所需的依赖局部。

这容许应用 splitChunks chunks: "all"来解决这些指标”。

留神，因为块加载是异步的，这使得初始计算也异步。当应用output.library 会是一个问题, 因为导出值当初是一个 Promise, 因为 alpha.14 这不适用于target: "node", 因为 chunk 加载是同步

Updated Resolver

enhanced-resolve更新到 v5, 有上面提晋升:

  • 解析跟踪更多的依赖关系，如失落的文件
  • 别名可能有多种抉择
  • 别名为 false 当初是可能的
  • 进步性能

Chunks without JS

不蕴含 JS 代码的块，将不再生成 JS 文件。

重大变动: 将来

试验

并不是所有的个性都从一开始就是稳固的。在 webpack 4 中，咱们增加了一些实验性的个性，并在更新日志中指出这些个性还处于试验阶段，但从配置中并不总是能分明地看出这些个性是否还处于试验阶段。

在 webpack 5 中有一个新的 experiments 配置选项，它容许启用试验个性。这能够分明地阐明哪些选项是启用的 / 应用的。

尽管 webpack 遵循语义版本控制，但它会对实验性个性进行例外解决。在小型 webpack 版本中，实验性的个性可能蕴含破坏性的变动。当产生这种状况时，咱们将在更改日志中增加一个明确的阐明。这将容许咱们更快地迭代试验个性，同时也容许咱们在次要版本上停留更长的工夫以取得稳固的个性。

webpack 5 将附带以下试验:

  • 旧的 WebAssembly 反对，如 webpack 4 ( experiments.syncWebAssembly)

  • 新的 WebAssembly 反对依据更新的标准( experiments.asyncWebAssembly)

    • 这使得 WebAssembly 模块成为一个异步模块

  • Top Level Await 阶段 3 草案 (experiments.topLevelAwait)

    • 在顶层应用 await 将使模块成为异步模块

  • Emitting bundle as module (experiments.outputModule)

    • 这将包装器 IIFE 从包中删除，强制采纳严格模式，通过 <script type="module"> 提早加载，并在模块模式下最小化

留神，这也意味着默认状况下禁用 WebAssembly 反对。

最低 node.js 版本

最小反对的 node.js 版本从 6 减少到 10.13.0(LTS)。

迁徙: 降级到可用的最新 node.js 版本。

对配置的更改

对构造的更改

  • entry: {} allows an empty object now (to allow to use plugins to add entries)
  • target supports an array, versions and browserslist
  • cache: Object removed: Setting to a memory-cache object is no longer possible
  • cache.type added: It’s now possible to choose between "memory" and "filesystem"

  • New configuration options for cache.type = “filesystem” added:

    • cache.cacheDirectory
    • cache.name
    • cache.version
    • cache.store
    • cache.hashAlgorithm
    • cache.idleTimeout
    • cache.idleTimeoutForIntialStore
    • cache.buildDependencies
  • snapshot.resolveBuildDependencies added
  • snapshot.resolve added
  • snapshot.module added
  • snapshot.managedPaths added
  • snapshot.immutablePaths added
  • resolve.cache added: Allows to disable/enable the safe resolve cache
  • resolve.concord removed
  • resolve.alias values can be arrays or false now
  • resolve.restrictions added: Allows to restrict potential resolve results
  • resolve.fallback added: Allow to alias requests that failed to resolve
  • resolve.preferRelative added: Allows to resolve modules requests are relative requests too

  • Automatic polyfills for native node.js modules were removed

    • node.Buffer removed
    • node.console removed
    • node.process removed
    • node.* (node.js native module) removed
    • MIGRATION: resolve.alias and ProvidePlugin. Errors will give hints. (Refer to node-libs-browser for polyfills & mocks used in v4)
  • output.filename can now be a function
  • output.assetModuleFilename added
  • output.jsonpScriptType renamed to output.scriptType
  • devtool is more strict
  • Format: false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
  • optimization.chunkIds: "deterministic" added
  • optimization.moduleIds: "deterministic" added
  • optimization.moduleIds: "hashed" deprecated
  • optimization.moduleIds: "total-size" removed

  • Deprecated flags for module and chunk ids were removed

    • optimization.hashedModuleIds removed
    • optimization.namedChunks removed (NamedChunksPlugin too)
    • optimization.namedModules removed (NamedModulesPlugin too)
    • optimization.occurrenceOrder removed
    • MIGRATION: Use chunkIds and moduleIds

  • optimization.splitChunks test no longer matches chunk name

    • MIGRATION: Use a test function (module, { chunkGraph}) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name")
  • optimization.splitChunks minRemainingSize was added
  • optimization.splitChunks filename can now be a function
  • optimization.splitChunks sizes can now be objects with a size per source type

  • minSize

    • minRemainingSize
    • maxSize
    • maxAsyncSize
    • maxInitialSize
  • optimization.splitChunks maxAsyncSize and maxInitialSize added next to maxSize: allows to specify different max sizes for initial and async chunks
  • optimization.splitChunks name: true removed: Automatic names are no longer supported
  • MIGRATION: Use the default. chunkIds: "named" will give your files useful names for debugging
  • optimization.splitChunks.cacheGroups[].idHint added: Gives a hint how the named chunk id should be chosen
  • optimization.splitChunks automaticNamePrefix removed
  • MIGRATION: Use idHint instead
  • optimization.splitChunks filename is no longer restricted to initial chunks
  • optimization.splitChunks usedExports added to include used exports when comparing modules
  • optimization.splitChunks.defaultSizeTypes added: Specified the size types when using numbers for sizes
  • optimization.mangleExports added
  • optimization.minimizer "..." can be used to reference the defaults
  • optimization.usedExports "global" value added to allow to disable the analysis per runtime and instead do it globally (better performance)
  • optimization.noEmitOnErrors renamed to optimization.emitOnErrors and logic inverted
  • optimization.realContentHash added
  • output.devtoolLineToLine removed
  • MIGRATION: No replacement
  • output.chunkFilename: Function is now allowed
  • output.hotUpdateChunkFilename: Function is now forbidden: It never worked anyway.
  • output.hotUpdateMainFilename: Function is now forbidden: It never worked anyway.
  • output.importFunctionName: string specifies the name used as replacement for import() to allow polyfilling for non-suppored environments
  • output.charset added: setting it to false omit the charset property on script tags
  • output.hotUpdateFunction renamed to output.hotUpdateGlobal
  • output.jsonpFunction renamed to output.chunkLoadingGlobal
  • output.chunkCallbackFunction renamed to output.chunkLoadingGlobal
  • output.chunkLoading added
  • output.enabledChunkLoadingTypes added
  • output.chunkFormat added
  • module.rules resolve and parser will merge in a different way (objects are deeply merged, array may include "..." to reference to prev value)
  • module.rules parser.worker added: Allows to configure the worker supported
  • module.rules query and loaders were removed
  • module.rules options passing a string is deprecated
  • MIGRATION: Pass an options object instead, open an issue on the loader when this is not supported
  • module.rules mimetype added: allows to match a mimetype of a DataUri
  • module.rules descriptionData added: allows to match a data from package.json
  • module.defaultRules "..." can be used to reference the defaults
  • stats.chunkRootModules added: Show root modules for chunks
  • stats.orphanModules added: Show modules which are not emitted
  • stats.runtime added: Show runtime modules
  • stats.chunkRelations added: Show parent/children/sibling chunks
  • stats.errorStack added: Show webpack-internal stack trace of errors
  • stats.preset added: select a preset
  • stats.relatedAssets added: show assets that are related to other assets (e. g. SourceMaps)
  • stats.warningsFilter deprecated in favor of ignoreWarnings
  • BannerPlugin.banner signature changed

  • data.basename removed

    • data.query removed
    • MIGRATION: extract from filename
  • SourceMapDevToolPlugin lineToLine removed
  • MIGRATION: No replacement
  • [hash] as hash for the full compilation is now deprecated
  • MIGRATION: Use [fullhash] instead or better use another hash option
  • [modulehash] is deprecated
  • MIGRATION: Use [hash] instead [moduleid] is deprecated
  • MIGRATION: Use [id] instead [filebase] removed
  • MIGRATION: Use [base] instead

  • New placeholders for file-based templates (i. e. SourceMapDevToolPlugin)

    • [name]
    • [base]
    • [path]
    • [ext]
  • externals when passing a function, it has now a different signature ({context, request}, callback)
  • MIGRATION: Change signature
  • externalsPresets added
  • experiments added (see Experiments section above)
  • watchOptions.followSymlinks added
  • watchOptions.ignored can now be a RegExp
  • webpack.util.serialization is now exposed.

对默认值的更改

  • target is now "browserslist" by default when a browserslist config is available
  • module.unsafeCache is now only enabled for node_modules by default
  • optimization.moduleIds defaults to deterministic in production mode, instead of size
  • optimization.chunkIds defaults to deterministic in production mode, instead of total-size
  • optimization.nodeEnv defaults to false in none mode
  • optimization.splitChunks.minSize defaults to 20k in production
  • optimization.splitChunks.enforceSizeThreshold defaults to 50k in production
  • optimization.splitChunks minRemainingSize defaults to minSize
  • This will lead to less splitted chunks created in cases where the remaining part would be too small
  • optimization.splitChunks maxAsyncRequests and maxInitialRequests defaults was been increased to 30
  • optimization.splitChunks.cacheGroups.vendors has be renamed to optimization.splitChunks.cacheGroups.defaultVendors
  • optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk now defaults to true
  • resolve(Loader).cache defaults to true when cache is used
  • resolve(Loader).cacheWithContext defaults to false
  • resolveLoader.extensions remove .json
  • node.global node.__filename and node.__dirname defaults to false in node-targets
  • stats.errorStack defaults to false

Loader related Changes

this.getOptions

这个新的 API 应该简化加载器中选项的应用。它容许通过一个 JSON 模式进行验证。详情请参见 https://github.com/webpack/we…

次要的外部变动

上面的变动只与插件作者相干:

New plugin order

webpack 5 中的插件当初在缺省配置被利用之前就曾经被利用了。这容许插件利用它们本人的默认值，或者充当配置预置。

但这也是一个破坏性的扭转，因为插件在利用时不能依赖于配置值的设置。

迁徙: 仅在插件挂钩中拜访配置。或者最好防止拜访配置，并通过构造函数承受选项。

Runtime Modules

大部分运行时代码被转移到所谓的“runtime modules”中。这些非凡模块负责增加运行时代码. 它们能够增加到任何块中，但以后总是增加到运行时块中。“Runtime Requirements”管制将哪些运行时模块 (或外围运行时局部) 增加到包中。这确保只有应用的运行时代码被增加到包中。未来，运行时模块还能够增加到按需加载块中，以便在须要时加载运行时代码

在大多数状况下，外围运行时容许内嵌入口模块，而不是用 `__webpack_require__ 调用它。如果包中没有其余模块，那么就不须要其余的 __webpack_require__ 了. 这与模块连贯很好地联合在一起，行将多个模块连接成单个模块。

在最好的状况下，基本不须要运行时代码。

迁徙: 如果你将运行时代码注入到 webpack 运行时的插件中，能够思考应用 RuntimeModules。

Serialization

增加了一个序列化机制来容许 webpack 中简单对象的序列化, 它具备可抉择的语义，因而应该被序列化的类须要显式地标记(并实现它们的序列化). 对于大多数模块, 所有依赖项和一些谬误曾经这样做了。

迁徙: 在应用自定义模块或依赖项时，倡议将它们序列化，以便从长久缓存中获益

Extensible Caching

增加了带有插件接口的缓存类。这个类可用于对缓存进行读写。依据配置的不同，不同的插件能够向缓存增加性能。

MemoryCachePlugin 增加内存缓存,FileCachePlugin增加长久 (文件系统) 缓存

FileCachePlugin应用序列化机制来向 / 从磁盘中长久化和复原缓存项

Hook Object Frozen

带有钩子的类会解冻它们的钩子对象，因而不再可能以这种形式增加自定义钩子。

迁徙: 举荐的增加自定义钩子的办法是应用 WeakMap 和动态 getXXXHooks(XXX)(即 getCompilationHook(compile))办法。外部类应用与自定义钩子雷同的机制。

Tapable Upgrade

webpack 3 插件的兼容层曾经被删除。它曾经被 webpack 4 弃用了

一些较少应用的 tapable api 被删除或弃用。

迁徙: 应用新的 tapable API。

Staged Hooks

在密封过程的几个步骤中，有多个不同阶段的挂钩。即。optimizeDependenciesBasic` `optimizeDependencies` and `optimizeDependenciesAdvanced, 这些曾经被移除，取而代之的是一个能够与 stage 选项一起应用的繁多钩子。无关可能的阶段，请参阅 OptimizationStages。

迁徙: 将钩子挂入残余的钩子。你能够增加一个 stage选项。

Main/Chunk/ModuleTemplate deprecation

Bundle 模板曾经被重构。MainTemplate/ChunkTemplate/ModuleTemplate 被弃用，JavascriptModulesPlugin 当初负责 JS 模板的解决。

在重构之前，JS 的输入由 Main/ChunkTemplate 解决，而另一个输入 (如 WASM、CSS) 由插件解决。看起来 JS 是第一类，而另一个输入是第二类。重构扭转了所有的输入都由它们的插件解决。

依然能够连贯到模板的某些局部。这些钩子当初在 JavascriptModulesPlugin 中，而不是 Main/ChunkTemplate 中。(是的，插件也能够有钩子。我称它们为附着的钩子。)

有一个编译层，所以 Main/Chunk/ModuleTemplate 依然存在，但只委托 tap 调用到新的钩子地位。

迁徙: 遵循弃用音讯中的倡议。大多指向不同地位的钩子。

Entry point descriptor

如果一个对象作为入口点被传递，它的值可能是一个字符串，字符串数组或者一个描述符:

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

描述符语法能够用来向入口点传递其余选项。

Entry point output filename

默认状况下，从 output.filename 提取条目块的输入文件名。然而你能够为一个特定的条目指定一个自定义输入文件名:

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

Entry point dependency

默认状况下，每个 entry chunk 存储它应用的所有模块。通过dependOn-option，您能够从一个 entry chunk 到另一个共享模块:

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

app chunk 将不蕴含 react-vendors 领有的模块。

Entry point library

入口描述符容许为每个入口点传递不同的 library 选项。

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

Entry point runtime

入口描述符容许为每个入口指定runtime, 当指定时，将创立具备此名称的 chunk, 其中仅蕴含该入口的 runtime 代码, 当多个入口指定雷同的runtime, 该 chunk 将为所有这些入口蕴含一个公共 runtime, 这意味着它们能够一起应用同一个 html 页面

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

Entry point chunk loading

条目描述符容许为每个入口指定一个 chunkLoading。这个入口的运行时将应用它来加载块。

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

Order and IDs

webpack 用于在编译阶段以特定的形式对模块和块进行排序，以增量程序调配 id。当初状况曾经不一样了。order 将不再用于 id 生成，相同，id 生成的齐全管制在插件中。

用来优化模块和块程序的钩子被删除了。

迁徙: 在编译阶段不能再依赖模块和块的程序。

Arrays to Sets

  • Compilation.modules is now a Set
  • Compilation.chunks is now a Set
  • Chunk.files is now a Set

有一个打印弃用正告的压缩层。

迁徙: 应用 Set 而不是数组办法。

Compilation.fileSystemInfo

这个新类可用于以缓存的形式拜访对于文件系统的信息。目前，它容许申请文件和目录工夫戳。如果可能的话，工夫戳的信息从监视器传输，否则由文件系统拜访决定。

在将来，申请文件内容哈希将被增加，模块将可能查看文件内容的有效性，而不是文件哈希。

迁徙: 应用 file/fileSystemInfo 代替file/contextTimestamps。

当初能够对目录进行 imestamping，这容许对 ContextModules 进行序列化。

Compiler.modifiedFiles曾经增加了 (在 Compiler.removedFiles 之后)，以便更容易地援用更改后的文件。

Filesystems

在 compiler.inputFileSystem 和compiler.outputFileSystem之后。对于所有不被视为输出或输入的 fs 操作，比方写入记录、缓存或剖析输入，有一个新的 compiler.intermediateFileSystem

文件系统当初有了 fs 接口，并且不再须要额定的办法，如 join 或 mkdirp。然而如果它们有像 join 或 dirname 这样的办法，就会应用它们。

Hot Module Replacement

HMR runtime 已被重构为 Runtime Modules。HotUpdateChunkTemplate曾经合并到 ChunkTemplate中。ChunkTemplates 和插件当初也应该解决 HotUpdateChunks。

HMR runtime 的 javascript 局部曾经从外围中分离出来。其余模块类型当初也能够以本人的形式解决 HMR。在将来，这将容许为像 mini-css-extract-plugin 或 WASM 模块提供。

迁徙: 因为这是一个新引入的性能，所以不须要迁徙。

import.meta.webpackHot与 module.hot公开雷同的 API。这也实用于严格的 ESM 模块 (.mjs, type: “module” in package.json) 不拜访模块。

Work Queues

webpack 用函数调用函数的形式去解决模块，以及限度并发的 semaphore 。Compilation.semaphore 曾经被移除，异步队列当初解决工作排队和解决。每一步都有一个独自的队列:

  • Compilation.factorizeQueue: 为一组依赖项调用模块工厂
  • Compilation.addModuleQueue: 为一组依赖项调用模块工厂
  • Compilation.buildQueue: 如有必要，构建模块(可能将模块存储到缓存中)
  • Compilation.rebuildQueue: 如果手动触发，则再次构建模块。
  • Compilation.processDependenciesQueue: 解决模块的依赖关系。

这些队列有一些钩子来监督和拦挡作业处理。

未来，多个编译器可能一起工作，而 job orchestration 能够通过拦挡这些队列来实现。

迁徙: 因为这是一个新引入的性能，所以不须要迁徙。

Logging

webpack 外部当初蕴含了一些日志记录统计数据。能够应用 stats.logging and infrastructureLogging选项来启用这些音讯。

Module and Chunk Graph

webpack 用于将解析后的模块存储在依赖项中，并将蕴含的模块存储在 chunk 中。当初状况曾经不一样了。所有对于模块图中模块如何连贯的信息当初都存储在 ModuleGraph 类中。所有对于模块如何与 chunk 连贯的信息当初都存储在 ChunkGraph 类中。依赖于块图的信息也存储在相干类中。

这意味着以下对于模块的信息曾经被挪动

  • Module connections -> ModuleGraph
  • Module issuer -> ModuleGraph
  • Module optimization bailout -> ModuleGraph (TODO: check if it should ChunkGraph instead)
  • Module usedExports -> ModuleGraph
  • Module providedExports -> ModuleGraph
  • Module pre order index -> ModuleGraph
  • Module post order index -> ModuleGraph
  • Module depth -> ModuleGraph
  • Module profile -> ModuleGraph
  • Module id -> ChunkGraph
  • Module hash -> ChunkGraph
  • Module runtime requirements -> ChunkGraph
  • Module is in chunk -> ChunkGraph
  • Module is entry in chunk -> ChunkGraph
  • Module is runtime module in chunk -> ChunkGraph
  • Chunk runtime requirements -> ChunkGraph

webpack 过来从缓存中复原断开模块与图的连贯这曾经没有必要了。模块不存储对于图形的信息，这能够在技术上用于多个图形。这使得缓存更容易。

大多数更改都有一个兼容层，在应用时它会打印一个弃用正告。

迁徙: 应用 ModuleGraph 和 ChunkGraph 上的新 api

Init Fragments

DependenciesBlockVariables变量被移除，取而代之的是 InitFragments。

DependencyTemplates 当初能够增加InitFragments 来将代码注入到模块源代码的顶部。InitFragments 容许删除反复数据。

迁徙: 应用 InitFragments 而不是在一个负索引处插入一些货色到源中。

Module Source Types

模块当初必须通过 Module.getSourceTypes()来定义它们反对的源类型。依据这一点，不同的插件应用这些类型调用 source(), 也就是说，对于源代码类型 javascript, JavascriptModulesPlugin将源代码嵌入到包中。源类型 webassembly将使 WebAssemblyModulesPlugin收回一个 wasm 文件。还反对自定义源类型. 也就是说，迷你 css-extract-plugin 可能会应用源代码类型样式表将源代码嵌入到 css 文件中。

模块类型和源类型之间没有关系。即模块类型 json也应用源类型 javascript和模块类型 webassembly/experimental应用源类型 javascript和webassembly。

迁徙: 自定义模块须要实现这些新的接口办法。

Extensible Stats

当初的 Stats preset, default, json and toString都是通过插件零碎来实现的。将以后状态转换为插件。

迁徙: 您当初能够自定义它，而不是替换整个 Stats 性能。当初能够将额定的信息增加到 stats json 中，而不是编写独自的文件。

New Watching

webpack 应用的观察者被重构了。它以前应用 chokidar和本机依赖 fsevents(仅在 OSX 上)。当初它只基于本地 node.js fs。这意味着 webpack 中没有原生依赖关系。

它还在监督时捕捉对于文件系统的更多信息。它当初能够捕获时光网工夫，查看事件工夫，以及失落文件的信息。为此，WatchFileSystem API 做了一点改变。在它下面，咱们还将数组转换为汇合，将对象转换为映射。

SizeOnlySource after emit

webpack 当初替换了 Compilation.assets 的源代码。应用 SizeOnlySource变量来缩小内存应用的资源。

Emitting assets multiple times

Multiple assets emit different content to the same filename会正告谬误

ExportsInfo

对于模块导出信息的存储形式已被重构。ModuleGraph 当初为每个模块提供了一个 ExportsInfo，它存储每个导出的信息 / 它还存储对于未知导出的信息，以及模块是否仅以副作用的形式应用。

对于每个导出，存储以下信息:

  • 是否应用导出? yes, no, not statically known, not determined (参考optimization.usedExports)
  • 是否提供导出? yes, no, not statically known, not determined (参考optimization.providedExports)
  • 能够将导出名称重命名吗? yes, no, not determined.
  • 如果导出已重命名，则应用新名称 (参考optimization.mangleExports)

  • 嵌套的导出信息，如果导出是一个自身附加了信息的对象

    • 用于从新导出名称空间对象import * as X from "..."; export {X};
    • 用于示意 JSON 模块中的构造

Code Generation Phase

当初，编译将代码生成作为独自的编译阶段。它不再暗藏在 Module.source() or Module.getRuntimeRequirements()外面

这将使流程更洁净。它还容许报告此阶段的停顿，并在剖析时使代码生成更加可见。

迁徙: Module.source() and Module.getRuntimeRequirements()被废除, 应用 Module.codeGeneration() 代替

Improved Code Generation

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

webpack 将多个导出 getter 合并到一个运行时函数调用中:

r.d(x, "a", () => a); r.d(x, "b", () => b); -> r.d(x, {a: () => a, b: () => b});

DependencyReference

webpack 过来有一个办法和类型来示意依赖项的援用(Compilation.getDependencyReference returning a DependencyReference). 此类型用于包含对于此援用的所有信息，如已导入导出的被援用模块，如果它是弱援用，还包含一些排序相干信息。

将所有这些信息捆绑在一起使得获取参考变得低廉，而且每次人们须要一条信息时，它也常常被调用。

在 webpack 5 中，这部分代码基被重构，办法被合成。

  • 能够从 ModuleGraphConnection 中读取所援用的模块
  • 导入导出名称能够通过 Dependency.getReferencedExports() 取得。
  • Dependency类上有一个 weak 标记
  • 排序只与 HarmonyImportDependencies相干，能够通过 sourceOrder属性取得

Presentational Dependencies

当初在 NormalModules中有一种新的依赖类型: 示意依赖

这些依赖关系只在代码生成阶段应用，而在模块图构建阶段不应用。因而它们永远不会有援用的模块或影响导出 / 导入。

解决这些依赖关系的老本更低，webpack 尽可能应用它们

Deprecated loaders

  • null-loader

    它将被废除。应用

    alias: {xyz$: false}

    或者应用绝对路径 [path.resolve(__dirname, "....")]: false

Minor Changes

  • Compiler.name: 当生成带有绝对路径的编译器名称时，请确保应用 | 或! 名字的两个局部。

    • 当初废除应用空格作为分隔符。(门路能够蕴含空间)
    • 提醒: 在 Stats 字符串输入中，| 被替换为空格。

  • SystemPlugin 默认被禁用

    • 迁徙: 防止应用它，因为标准曾经被删除。您能够应用Rule.parser.system: true

  • ModuleConcatenationPlugin: 因为 DependencyVariables 曾经被删除，所以连贯不再被阻止

    • 这意味着它当初能够在 module, global, process或 ProvidePlugin 的状况下连贯

  • exec从加载器上下文中删除

    • 迁徙: 这能够在加载器自身中实现

  • Stats.presetToOptions 移除

    • 迁徙: 应用 compilation.createStatsOptions 代替

  • SingleEntryPlugin andSingleEntryDependency移除

    • 迁徙: 应用 EntryPlugin and EntryDependency
  • chunk 当初能够有多个入口模块

  • ExtendedAPIPlugin 移除

    • 迁徙: 不再须要，剩下的 webpack_hash__ 和webpack_chunkname__能够始终应用，运行时代码被注入到须要的中央。

  • ProgressPlugin 不再为 reportProgress 应用 tapable context

    • 迁徙: 应用 ProgressPlugin.getReporter(compiler) 代替
  • ProvidePlugin再次为 .mjs 文件启用

  • Stats json errors and warnings不再蕴含字符串，而是蕴含信息合成为属性的对象。

    • 迁徙: 拜访无关属性的信息。即message

  • Compilation.hooks.normalModuleLoader废除

    • 迁徙: 应用 NormalModule.getCompilationHooks(compilation).loader代替
  • NormalModuleFactory钩子曾经从瀑布模型改成流水模型, 扭转和重命名返回瀑布函数的钩子

  • 移除compilationParams.compilationDependencies

    • 通过增加 compilation.file/context/missingDependencies 插件能够将依赖项增加到编译中
    • 兼容层将委托编 compilationDependencies.add 到 fileDependencies.add
  • stats.assetsByChunkName[x]当初是数组
  • __webpack_get_script_filename__函数增加为了取得 script 文件名
  • getResolve(options) 会在加载器 API 用不同的形式合并选项参数, 参考module.rules resolve

  • package.json 的 sideEffects 会被 glob-to-regex 解决取代micromatch

    • 这可能扭转了边界状况下的语义
  • checkContext从 IgnorePlugin 移除
  • 新的__webpack_exports_info__ API 容许导出 usage introspection
  • SourceMapDevToolPlugin 当初也实用于 non-chunk assets
  • 当援用的 env 变量失落且没有回退时，EnvironmentPlugin 当初会显示谬误
  • 从架构中删除服务属性

Other Minor Changes

  • removed buildin directory and replaced buildins with runtime modules

  • Removed deprecated features

    • BannerPlugin now only support one argument that can be an object, string or function
  • removed CachePlugin
  • Chunk.entryModule is deprecated, use ChunkGraph instead
  • Chunk.hasEntryModule is deprecated
  • Chunk.addModule is deprecated
  • Chunk.removeModule is deprecated
  • Chunk.getNumberOfModules is deprecated
  • Chunk.modulesIterable is deprecated
  • Chunk.compareTo is deprecated
  • Chunk.containsModule is deprecated
  • Chunk.getModules is deprecated
  • Chunk.remove is deprecated
  • Chunk.moveModule is deprecated
  • Chunk.integrate is deprecated
  • Chunk.canBeIntegrated is deprecated
  • Chunk.isEmpty is deprecated
  • Chunk.modulesSize is deprecated
  • Chunk.size is deprecated
  • Chunk.integratedSize is deprecated
  • Chunk.getChunkModuleMaps is deprecated
  • Chunk.hasModuleInGraph is deprecated
  • Chunk.updateHash signature changed
  • Chunk.getChildIdsByOrders signature changed (TODO: consider moving to ChunkGraph)
  • Chunk.getChildIdsByOrdersMap signature changed (TODO: consider moving to ChunkGraph)
  • Chunk.getChunkModuleMaps removed
  • Chunk.setModules removed
  • deprecated Chunk methods removed
  • ChunkGraph added
  • ChunkGroup.setParents removed
  • ChunkGroup.containsModule removed
  • ChunkGroup.remove no longer disconnected the group from block
  • ChunkGroup.compareTo signature changed
  • ChunkGroup.getChildrenByOrders signature changed

  • ChunkGroupindex and index renamed to pre/post order index

    • old getter is deprecated
  • ChunkTemplate.hooks.modules signature changed
  • ChunkTemplate.hooks.render signature changed
  • ChunkTemplate.updateHashForChunk signature changed
  • Compilation.hooks.optimizeChunkOrder removed
  • Compilation.hooks.optimizeModuleOrder removed
  • Compilation.hooks.advancedOptimizeModuleOrder removed
  • Compilation.hooks.optimizeDependenciesBasic removed
  • Compilation.hooks.optimizeDependenciesAdvanced removed
  • Compilation.hooks.optimizeModulesBasic removed
  • Compilation.hooks.optimizeModulesAdvanced removed
  • Compilation.hooks.optimizeChunksBasic removed
  • Compilation.hooks.optimizeChunksAdvanced removed
  • Compilation.hooks.optimizeChunkModulesBasic removed
  • Compilation.hooks.optimizeChunkModulesAdvanced removed
  • Compilation.hooks.optimizeExtractedChunksBasic removed
  • Compilation.hooks.optimizeExtractedChunks removed
  • Compilation.hooks.optimizeExtractedChunksAdvanced removed
  • Compilation.hooks.afterOptimizeExtractedChunks removed
  • Compilation.hooks.stillValidModule added
  • Compilation.hooks.statsPreset added
  • Compilation.hooks.statsNormalize added
  • Compilation.hooks.statsFactory added
  • Compilation.hooks.statsPrinter added
  • Compilation.fileDependencies, Compilation.contextDependencies and Compilation.missingDependencies are now LazySets
  • Compilation.entries removed
  • MIGRATION: Use Compilation.entryDependencies instead
  • Compilation._preparedEntrypoints removed
  • dependencyTemplates is now a DependencyTemplates class instead of a raw Map
  • Compilation.fileTimestamps and contextTimestamps removed
  • MIGRATION: Use Compilation.fileSystemInfo instead
  • Compilation.waitForBuildingFinished removed
  • MIGRATION: Use the new queues
  • Compilation.addModuleDependencies removed
  • Compilation.prefetch removed
  • Compilation.hooks.beforeHash is now called after the hashes of modules are created
  • MIGRATION: Use Compiliation.hooks.beforeModuleHash instead
  • Compilation.applyModuleIds removed
  • Compilation.applyChunkIds removed
  • Compiler.root added, which points to the root compiler
  • it can be used to cache data in WeakMaps instead of statically scoped
  • Compiler.hooks.afterDone added
  • Source.emitted is no longer set by the Compiler
  • MIGRATION: Check Compilation.emittedAssets instead
  • Compiler/Compilation.compilerPath added: It’s a unique name of the compiler in the compiler tree. (Unique to the root compiler scope)
  • Module.needRebuild deprecated
  • MIGRATION: use Module.needBuild instead
  • Dependency.getReference signature changed
  • Dependency.getExports signature changed
  • Dependency.getWarnings signature changed
  • Dependency.getErrors signature changed
  • Dependency.updateHash signature changed
  • Dependency.module removed
  • There is now a base class for DependencyTemplate
  • MultiEntryDependency removed
  • EntryDependency added
  • EntryModuleNotFoundError removed
  • SingleEntryPlugin removed
  • EntryPlugin added
  • Generator.getTypes added
  • Generator.getSize added
  • Generator.generate signature changed
  • HotModuleReplacementPlugin.getParserHooks added
  • Parser was moved to JavascriptParser
  • ParserHelpers was moved to JavascriptParserHelpers
  • MainTemplate.hooks.moduleObj removed
  • MainTemplate.hooks.currentHash removed
  • MainTemplate.hooks.addModule removed
  • MainTemplate.hooks.requireEnsure removed
  • MainTemplate.hooks.globalHashPaths removed
  • MainTemplate.hooks.globalHash removed
  • MainTemplate.hooks.hotBootstrap removed
  • MainTemplate.hooks some signatures changed
  • Module.hash deprecated
  • Module.renderedHash deprecated
  • Module.reasons removed
  • Module.id deprecated
  • Module.index deprecated
  • Module.index2 deprecated
  • Module.depth deprecated
  • Module.issuer deprecated
  • Module.profile removed
  • Module.prefetched removed
  • Module.built removed
  • Module.used removed
  • MIGRATION: Use Module.getUsedExports instead

  • Module.usedExports deprecated

    • MIGRATION: Use Module.getUsedExports instead
  • Module.optimizationBailout deprecated
  • Module.exportsArgument removed
  • Module.optional deprecated
  • Module.disconnect removed
  • Module.unseal removed
  • Module.setChunks removed
  • Module.addChunk deprecated
  • Module.removeChunk deprecated
  • Module.isInChunk deprecated
  • Module.isEntryModule deprecated
  • Module.getChunks deprecated
  • Module.getNumberOfChunks deprecated
  • Module.chunksIterable deprecated
  • Module.hasEqualsChunks removed
  • Module.useSourceMap moved to NormalModule
  • Module.addReason removed
  • Module.removeReason removed
  • Module.rewriteChunkInReasons removed
  • Module.isUsed removed
  • MIGRATION: Use isModuleUsed, isExportUsed and getUsedName instead
  • Module.updateHash signature changed
  • Module.sortItems removed
  • Module.unbuild removed
  • MIGRATION: Use invalidateBuild instead
  • Module.getSourceTypes added
  • Module.getRuntimeRequirements added
  • Module.size signature changed
  • ModuleFilenameHelpers.createFilename signature changed
  • ModuleProfile class added with more data
  • ModuleReason removed
  • ModuleTemplate.hooks signatures changed
  • ModuleTemplate.render signature changed
  • Compiler.dependencies removed
  • MIGRATION: Use MultiCompiler.setDependencies instead
  • MultiModule removed
  • MultiModuleFactory removed
  • NormalModuleFactory.fileDependencies, NormalModuleFactory.contextDependencies and NormalModuleFactory.missingDependencies are now LazySets
  • RuntimeTemplate methods now take runtimeRequirements arguments
  • serve property is removed
  • Stats.jsonToString removed
  • Stats.filterWarnings removed
  • Stats.getChildOptions removed
  • Stats helper methods removed
  • Stats.toJson signature changed (second argument removed)
  • ExternalModule.external removed
  • HarmonyInitDependency removed
  • Dependency.getInitFragments deprecated
  • MIGRATION: Use apply initFragements instead
  • DependencyReference now takes a function to a module instead of a Module

  • HarmonyImportSpecifierDependency.redirectedId removed

    • MIGRATION: Use setId instead
  • acorn 5 -> 7

  • Testing

    • HotTestCases now runs for multiple targets async-node node web webworker
    • TestCases now also runs for filesystem caching with store: "instant" and store: "pack"
    • TestCases now also runs for deterministic module ids
  • Tooling added to order the imports (checked in CI)
  • Chunk name mapping in runtime no longer contains entries when chunk name equals chunk id
  • add resolvedModuleId resolvedModuleIdentifier and resolvedModule to reasons in Stats which point to the module before optimizations like scope hoisting
  • show resolvedModule in Stats toString output
  • loader-runner was upgraded: https://github.com/webpack/lo…
  • file/context/missingDependencies in Compilation are no longer sorted for performance reasons
  • Do not rely on the order
  • webpack-sources was upgraded: https://github.com/webpack/we…
  • webpack-command support was removed
  • Use schema-utils@2 for schema validation
  • Compiler.assetEmitted has an improved second argument with more information
  • BannerPlugin omits trailing whitespace
  • removed minChunkSize option from LimitChunkCountPlugin

  • reorganize from javascript related files into sub-directory

    • webpack.JavascriptModulesPlugin -> webpack.javascript.JavascriptModulesPlugin
  • Logger.getChildLogger added
  • change the default of entryOnly of the DllPlugin to true
  • remove special request shortening logic and use single relative paths for readable module names
  • allow webpack:// urls in SourceMaps to provided paths relative to webpack root context
  • add API to generate and process CLI arguments targeting webpack configuration
  • add __system_context__ as context from System.js when using System.js as libraryTarget
  • add bigint support for the DefinePlugin
  • add bigint support for basic evaluations like maths
  • remove ability to modify the compilation hash after the hash has been created
  • remove HotModuleReplacementPlugin multiStep mode
  • assetInfo from emitAsset will now merge when nested objects or arrays are used
  • [query] is now a valid placeholder when for paths based on a filename like assets
  • add Compilation.deleteAsset to correctly delete an assets and non-shared related assets
  • expose require("webpack-sources") as require("webpack").sources
  • terser 5

正文完
javascript
发表至： javascript
2020-10-22
 0
关于javascript:前端培训中级阶段39-脚手架-vuecli
JavaScript 是如何工作的：深入网络层 + 如何优化性能和安全
客户端判断
jQuery源码解析之click的事件绑定