webpack 4.0.0 release notes

时间 2019-11-09

标签 webpack 4.0.0 release notes 繁體版

原文原文链接

重大改变（Big changes）

环境（Environment）javascript
- 再也不支持Node.js 4。源码更新到更高的ecmascript环境版本。
使用（Usage）java
- 您如今必须在两种模式之间选择（使用mode 或--mode）：production 或 developmentwebpack
  - production 模式使用了各类默认的优化配置去生成已经被优化的包
  - development 支持 comments 和 hint，并启用devtool 的 eval
  - production 不支持watching，development 针对快速增量重建进行了优化
  - production 还能够实现模块链接（范围提高 Scope Hoisting）
  - 您也能够使用optimization.* 来作详细配置（构建您的自定义模式）
  - process.env.NODE_ENV 被自动设置为 production 或 development（仅在构建的代码中，而不在配置中）
  - 有一个隐藏的无模式（--mode none）能够禁用全部内容
语法（Syntax）git
- import() 始终返回命名空间对象。 CommonJS模块包含在默认导出中github
  - 若是您曾经使用import() 导入CommonJs，这可能会破坏您的代码
配置（Configuration）web
- 您再也不须要使用这些插件json
  - 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原文