webpack 4.0.0 release notes

10次阅读

共计 6200 个字符,预计需要花费 16 分钟才能阅读完成。

重大改变(Big changes)

环境(Environment)
不再支持 Node.js 4。源码更新到更高的 ecmascript 环境版本。

使用(Usage)

您现在必须在两种模式之间选择(使用 mode 或 –mode):production 或 development

production 模式使用了各种默认的优化配置去生成已经被优化的包
development 支持 comments 和 hint,并启用 devtool 的 eval
production 不支持 watching,development 针对快速增量重建进行了优化
production 还可以实现模块连接(范围提升 Scope Hoisting)
您也可以使用 optimization.* 来做详细配置(构建您的自定义模式)

process.env.NODE_ENV 被自动设置为 production 或 development(仅在构建的代码中,而不在配置中)
有一个隐藏的无模式(–mode none)可以禁用所有内容

语法(Syntax)

import() 始终返回命名空间对象。CommonJS 模块包含在默认导出中
如果您曾经使用 import() 导入 CommonJs,这可能会破坏您的代码

配置(Configuration)

您不再需要使用这些插件

NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors(默认情况下在生产模式下打开)

ModuleConcatenationPlugin -> optimization.concatenateModules(默认情况下在生产模式下启用)

NamedModulesPlugin – > optimization.namedModules(默认情况下在开发模式下启用)

CommonsChunkPlugin 被移除 -> optimization.splitChunks,optimization.runtimeChunk

JSON

webpack 现在可以本地处理 JSON

在将 JSON 通过 loader 转换为 JS 时,您可能需要添加 type: “javascript / auto”

不使用 loader 的情况下使用 JSON 仍然有用

允许通过 ESM 语法导入 JSON
通过 export 消除 JSON 模块是没用的(unused exports elimination for JSON modules)

优化(Optimization)

升级 uglifyjs-webpack-plugin 到 v1
ES15 支持

重大特性(Big features)

模块(Modules)

webpack 现在支持一下几种模块类型:

javascript/auto: (webpack 3 中的默认值)启用了所有模块系统的 Javascript 模块:CommonJS,AMD,ESM
javascript/esm: EcmaScript 模块,所有其他模块系统都不可用
javascript/dynamic:只有 CommonJS 和 EcmaScript 模块不可用
json: JSON 数据,可通过 require 和 import 获得
webassembly/experimental:WebAssembly 模块(目前是实验性的)

与 javascript/auto 相比,javascript/esm 更严格地处理 ESM:

导入的模块需要存在导入名称
动态模块(non-esm,即 CommonJs)只能通过默认导入来导入,其他一切(包括 namespace import)都会发出错误

在.mjs 模块中默认为 javascript/esm

WebAssembly 模块

可以导入其他模块(JS 和 WASM)

通过 ESM 导入验证 WebAssembly 模块的导出
尝试从 WASM 导入不存在的导出时,您将收到警告 / 错误

只能在异步块中使用。它们在初始块中不起作用(对 Web 性能不利)
通过 import() 使用 WASM 导入模块

这是一个实验性特征和变化主题

优化(Optimization)

sideEffects: false 在 package.json 中被支持

sideEffects 在 package.json 中还支持 glob 表达式和 glob 表达式数组

使用 JSONP 数组而不是 JSONP 函数 -> 异步脚本标记支持,顺序不再重要
引入了新的 optimization.splitChunks 选项, 详情: https://gist.github.com/sokra…

现在通过 webpack 本身删除了无用分支

之前:通过 Uglify 删除了无用代码
现在:通过 webpack 删除无用代码(在某些情况下)
这可以防止在无用分支中发生 import() 时崩溃

语法(Syntax)

import() 的 magic comment 支持 webpackInclude 和 webpackExclude。它们允许在使用动态表达式时过滤文件。

使用 System.import() 现在会发出警告

您可以设置 Rule.parser.system: true 来禁用警告
您可以设置 Rule.parser.system: false 来禁用 System.import

配置(Configuration)

现在可以使用 module.rules[].resolve 配置解析。它可以与全局配置合并

optimization.minimize 中已添加 on/off 开关以切换最小化

optimization.minimize 中已添加 minimizers 和 options 配置

使用(Usage)

验证了一些插件选项
CLI 已移至 webpack-cli,您需要安装 webpack-cli 才能使用 CLI

ProgressPlugin(–progress)现在显示插件名称
至少对于迁移到新插件系统的插件是可以的

性能(Performance)

UglifyJs 现在默认缓存(caches)和并行化(parallizes)
多项性能改进,尤其适用于更快的增量重建
RemoveParentModulesPlugin 的性能改进

统计
统计信息可以显示嵌套在连接模块中的模块

特性(Features)

配置(Configuration)

为 mjs,json 和 wasm 扩展自动选择模块类型。其他扩展需要通过 module.rules[].type 来配置
不正确的 options.dependencies 配置将抛出错误

sideEffects 可以通过 module.rules 覆盖

output.hashFunction 可以是自定义散列函数的构造函数
出于性能原因,您可以提供非加密哈希函数

添加 output.globalObject 配置选项以允许在运行时 exitCode 中选择全局对象引用

运行时(Runtime)
块(chunk)加载的错误现在包括更多信息和两个新属性类型(type)和请求(request)。

Devtool

从 SourceMaps 和 eval 中移除 comment footer
在 eval source map devtool plugin 中添加 include test 和 exclude 支持

性能(Performance)

webpacks AST 可以直接从 loader 传递给 webpack,以避免额外的解析
未使用的模块不再做不必要的串联
添加一个 ProfilingPlugin,用于编写(Chrome)包含插件时序的配置文件
使用 for of 而不是 forEach

使用 Map 和 Set 来代替 Objects
使用 includes 来代替 indexOf

用字符串方法替换了一些 RegExp
队列中不会重复进入相同的任务
默认情况下,使用更快的 md4 哈希进行散列

优化(Optimization)

当使用超过 25 个导出时,损坏的导出名称会更短。
脚本标签不再是 text/javascript 和 async,因为这是默认值(节省几个字节)
连接模块现在产生的代码更少
常量替换现在不需要__webpack_require__ 且省略了参数

默认(Defaults)

webpack 默认按此顺序查找.wasm,.mjs,.js 和.json 扩展名

output.pathinfo 现在默认在 development 模式下开启
in-memory 缓存在 production 中默认关闭

entry 默认指向路径 ./src

在省略 mode 选项时默认使用 production 模式

使用(Usage)

向 SourceMapDevToolPlugin 添加详细的进度报告
删除插件时提供有用的错误消息

统计(stats)

在统计中大小的显示使用 kiB 代替 kB
入口点(entrypoints)默认显示在统计信息中
chunks 在统计中显示 <{parents}> >{children}< 和 ={siblings}=

添加 buildAt 时间到统计中
统计 json 文件包含输出路径

语法(Syntax)

上下文(context)中支持资源查询
在 import() 中引用入口点(entry point)名称现在会发出错误而不是警告
升级到 acorn 5 并支持 ES 2018

插件(Plugins)

done 现在是异步钩子

Bug 修复(Bugfixes)

生成的注释不在 */ 中中断
webpack 不再修改传递的选项对象(options object)
Compiler “watch-run” hook 现在作为 Compiler 的第一个参数
将 output.chunkCallbackName 添加到 schema 以允许配置 Web Worker 模板
使用 module.id/loaded 正确地避免了模块链接(Module Concatentation)(Scope Hoisting)
OccurenceOrderPlugin 现在按正确的顺序对模块进行排序(而不是颠倒)
调用 Watching.invalidate 时,会从观察者读取文件的时间戳
修正不正确的 -!在 post loaders 中
添加 run 和 watchRun hooks for MultiCompiler

在 ESM 中 this 显示 undefined
VariableDeclaration 被正确识别为 var,const 或 let

当使用模块类型为 javascript/dynamic 或 javascript/module 时,Parser 现在使用正确的资源类型(module/script)解析源代码。
不在当 buildMeta 为 null 的缺失模块时崩溃
为 electron targets 添加 original-fs 模块
HMRPlugin 可以在 plugins 之外添加到 Compiler 中

内部变化(Internal changes)

使用 tap 调用替换了 plugin 调用(新的插件系统)
将许多已弃用的插件迁移到新的插件系统 API
为 json 模块添加了 buildMeta.exportsType: “default”

从 Parser 中删除无用的方法(parserStringArray,parserCalculatedStringArray)
移除清除 BasicEvaluatedExpression 和多种类型的功能
使用 Buffer.from 代替 new Buffer

避免使用 forEach,使用 for of 代替
使用 neo-async 代替 async

更新 tapable 和 enhanced-resolve 依赖关系到新的主要版本
使用 prettier

移除特性(Removed features)

移除 module.loaders
移除 loaderContext.options
移除 Compilation.notCacheable flag
移除 NoErrorsPlugin
移除 Dependency.isEqualResource
移除 NewWatchingPlugin
移除 CommonsChunkPlugin

plugins/loaders 突破性更新(Breaking changes for plugins/loaders)

全新的插件系统

plugin 方法向后兼容
插件中现在应该使用 Compiler.hooks.xxx.tap(<plugin name>,fn)

新的主要版本 – enhanced-resolve
Templates for chunks 现在可以生成多个资源(multiple assets)

Chunk.chunks/parents/blocks 不再是 Arrays。内部使用 Set,有方法可以访问它

Parser.scope.renames 和 Parser.scope.definitions 不在使用 Objects/Arrays, 而是 Map/Sets
Parser 使用 StackedSetMap (类似 LevelDB 的数据结构) 代替 Arrays
应用插件时不再设置 Compiler.options

由于重构,Harmony Dependencies 已经改变

Dependency.getReference() 现在可能返回一个 weak 属性。Dependency.weak 现在由 Dependency 基类使用,并在 getReference() 的基本 impl 中返回
所有 Module 的构造函数参数都已更改
将选项合并到 ContextModule 和 resolveDependencies 的 options 对象中
更改并重命名 import() 的依赖项
将 Compiler.resolvers 移动到可通过插件访问的 Compiler.resolverFactory 中

Dependency.isEqualResource 已替换为 Dependency.getResourceIdentifier

Template 中的方法是静态的

添加了一个新的 RuntimeTemplate 类,并将 outputOptions 和 requestShortener 移动到此类

许多方法已更新为使用 RuntimeTemplate

我们计划将访问运行时的代码移动到这个新类

Module.meta 以及被替代为 Module.buildMeta

已添加 Module.buildInfo 和 Module.factoryMeta

Module 的某些属性已移至新对象中
添加了指向 context 选项的 loaderContext.rootContext。Loaders 可以使用它来创建相对于应用程序根目录的东西
启用 HMR 时,将 this.hot 标志添加到 loader 上下文

buildMeta.harmony 已替换为 buildMeta.exportsType: “namespace”

chunk 图已更改:

之前:Chunks 以父子关系相关联。
现在:ChunkGroups 以父子关系相关联。ChunkGroups 按顺序包含 Chunks
之前:AsyncDependenciesBlocks 按顺序引用 Chunks 的列表
现在:AsyncDependenciesBlocks 引用单个 ChunkGroup

file/contextTimestamps 现在是 Maps

map/foreach Chunks/Modules/Parents 方法已经被 废弃 / 移除
NormalModule 接受 Constructor 中的选项对象(options object)
为 NormalModule 添加了必需的生成器参数
为 NormalModuleFactory 添加了 createGenerator 和 generator hooks 以自定义代码生成
允许通过钩子自定义 Chunks 的渲染清单

参考
webpack 4.0.0 release notes github 原文

正文完
 0