webpack 4.0.0 release notes

重大改变（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原文