webpack4.0正式版重大更新与特性详细清单

翻译：疯狂的技术宅原文作者：sokra原文链接：https://github.com/webpack/webpack/releases/tag/v4.0.0

重大更新

• 环境
  • 不再支持Node.js 4。 源代码已升级到更高版本的ecmascript。
• 用法
  • 生产模式能够实现各种优化来生成最佳方案的捆绑包
  • 开发模式能够在开发过程中注释和提示，并使eval devtool
  • 生产模式不支持watching，开发模式针对快速增量重建进行了优化
  • 生产模式也使模块连接合并（范围提升）
  • 你可以使用optimization.*标志对此进行详细配置（构建您的自定义模式）
  • process.env.NODE_ENV被设置为生产或开发（仅在构建的代码中，而不是在配置中）
  • 有一种隐藏的none模式可以禁用所有的功能
  • 你现在必须在两种模式之间选择（mode 或 --mode）：生产模式或开发模式
• 句法
  • 这如果使用import()导入 CommonJs 可能会破坏你的代码，
  • import()总是返回一个命名空间对象。 CommonJS 模块被封装到默认导出中
• 配置
  • NoEmitOnErrorsPlugin - > optimization.noEmitOnErrors（在生产模式下默认打开）
  • ModuleConcatenationPlugin - > optimization.concatenateModules（在生产模式下默认打开）
  • NamedModulesPlugin - > optimization.namedModules（开发模式默认打开）
  • 不再需要使用这些插件：
  • CommonsChunkPlugin移除 - > optimization.splitChunks，optimization.runtimeChunk
• JSON
  • 导出时消除未使用的JSON模块
  • 将JSON通过加载器转换为JS时，可能需要添加type: "javascript/auto"
  • 只使用JSON而无需加载器应该仍然有效
  • webpack现在原生处理JSON
  • 允许通过ESM语法导入JSON
• 优化
  • 将uglifyjs-webpack-plugin升级到v1
  • 支持ES15

重要特性

• 模块
  • 可以导入其他模块（JS和WASM）
  • 来自WebAssembly模块的导出通过ESM导入进行验证
  • 只能用于异步块。它们不起作用（对网络性能不利）
  • 这是一个实验性特征和变化主题
  • 尝试从WASM导入不存在的导出时，您会收到警告/错误
  • 使用WASM通过import()导入模块
  • 导入的名称需要在导入的模块上存在
  • 动态模块（非esm，即CommonJs）只能通过默认导入导入，其他所有（包括命名空间导入）都会发出错误
  • javascript/auto：（webpack 3中的默认版本）启用了所有模块系统的Javascript模块：CommonJS，AMD，ESM
  • javascript/esm：EcmaScript模块，所有其他模块系统都不可用
  • javascript/dynamic：只有CommonJS和EcmaScript模块不可用
  • json：JSON数据，可通过require和import获取
  • webassembly/experimental：WebAssembly模块（目前是实验性的）
  • webpack现在支持这些模块类型：
  • 与javascript/auto相比，javascript/esm更严格地处理ESM：
  • 在.mjs模块默认为javascript/esm
  • WebAssembly模块
• 优化
  • 之前：Uglify删除了死码
  • 现在：webpack删除死码（在某些情况下）
  • 这可以防止import()处理死分支时发生崩溃
  • package.json中的sideEffects还支持glob表达式和glob表达式的数组
  • side.Effects:false现在在package.json中受支持
  • 不使用JSONP函数，而是使用JSONP数组 ->异步脚本标记支持，顺序不再重要
  • 引入了新的optimization.splitChunks选项，详情：https：//gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
  • 死分支现在由webpack自己删除
• 语法
  • webpackInclude和webpackExclude受到import()的魔法注释的支持。 它们允许在使用动态表达式时过滤文件。
  • 使用System.import()现在会发出警告
  • 可以使用Rule.parser.system:true禁用警告
  • 可以使用Rule.parser.system:false禁用System.import
• 配置
  • 默认情况下：在生产模式下打开，在开发模式下关闭
  • 现在可以使用module.rules[].resolve来配置解析。它与全局配置合并。
  • optimization.minimize已添加到最小化开/关
  • optimization.minimizer已被添加到配置最小化器和选项
• 使用
  • 至少对于迁移到新插件系统的插件
  • 一些插件选项现在被验证
  • CLI已迁移到webpack-cli，你需要安装webpack-cli才能使用CLI
  • ProgressPlugin（--progress）现在显示插件名称
• 性能
  • UglifyJs现在默认缓存和并行
  • 多重性能改进，特别是对于更快的增量重建
  • 改进了RemoveParentModulesPlugin的性能
• 统计
  • 统计信息可以显示嵌套在连接模块中的模块

特性

• 配置
  • 模块类型自动选择为mjs，json和wasm扩展名。其他扩展需要通过module.rules[]type进行配置
  • 不正确的options.dependencies配置现在会抛出错误
  • sideEffects可以通过module.rules覆盖
  • output.hashFunction现在可以是自定义散列函数的构造函数
  • 出于性能方面的原因，你可以提供非cryto哈希函数
  • 添加·output.globalObject·配置选项以允许在运行时exitCode中选择全局对象引用
• 运行
  • 现在，块加载错误包含更多信息和两个新的属性类型和请求。
• Devtool
  • 从SourceMaps和eval中删除注释页脚
  • 为eva source mapl devtool插件添加对include test 和exclude的支持
• 性能
  • webpack AST可以直接从加载器传递给webpack以避免额外的解析
  • 未使用的模块不再不必要地连接起来
  • 添加一个ProfilingPlugin，它写入一个包含插件时间的（Chrome）配置文件
  • 使用for of而不是forEach
  • 使用map和set而不是对象
  • 使用includes而不是indexOf
  • 用字符串方法替换了一些RegExp
  • Queue不会再次把同一个job存入队列
  • 默认情况下，使用更快的md4散列进行散列
• 优化
  • 当使用超过25个exports时，exports名称变短。
  • 脚本标签不再是text/javascript 和 async，因为这是默认值（保存几个字节）
  • 串联模块现在生成更少的代码
  • 常量替换现在不需要__webpack_require__，参数被忽略
• 默认
  • webpack现在按此顺序查找.wasm，.mjs，.js和.json扩展名
  • output.pathinfo现在默认处于开发模式
  • 内存缓存默认情况下在生产中处于关闭状态
  • entry默认为./src
  • output.path默认为./dist
  • 省略模式选项时使用生产默认值
• 使用
  • 向SourceMapDevToolPlugin添加详细的进度报告
  • 现在删除的插件会提供一个有用的错误消息
• 统计
  • 现在大小显示为kiB而不是统计中的kB
  • 现在默认情况下在统计信息中显示入口点
  • 块在统计信息中显示<{parents}> >{children}< 和 ={siblings}=
  • 添加·buildAt`的时间统计
  • stats json现在包含输出路径
• 语法
  • 上下文支持资源查询
  • 在import()中引用入口点名称现在会发出错误而不是警告
  • 升级到acorn 5并支持ES 2018
• 插件
  • done是一个异步钩子

修复的Bug

• 生成的评论不再超出 * /
• webpack不再修改传递的选项对象
• 编译器“watch-run”钩子现在具有编译器作为第一个参数
• 将output.chunkCallbackName添加到模式以允许配置WebWorker模板
• 现在使用module.id/loaded可以正确地从Module Concatentation（范围提升）
• OccurenceOrderPlugin现在按照正确的顺序排序模块（而不是颠倒过来）
• 调用Watching.invalidate时，将从观察器读取文件时间戳
• 修复-! 在post加载器错误的行为
• 为MultiCompiler添加run和watchRun挂钩
• this在ESM中未定义
• VariableDeclaration被正确识别为var，const或let
• 当模块类型为javascript/dynamic或javascript/module时，解析器现在使用正确的源类型（模块/脚本）解析源代码。
• 使用buildMeta为null的缺失模块不再崩溃
• 为electron targets添加original-fs模块
• HMRPlugin可以添加到编译器之外的plugins

内部变化

• 使用tap调用替换plug 调用（新插件系统）
• 将许多弃用的插件迁移到新的插件系统API
• 为json模块添加了buildMeta.exportsType:"default"
• 从Parser中移除未使用的方法（parserStringArray，parserCalculatedStringArray）
• 移除了清除BasicEvaluatedExpression功能并具有多种类型
• Buffer.from替代new Buffer
• 避免使用forEach并改为使用for
• 使用neo-async而不是async
• 将tapable和enhanced-resolve依赖关系更新为新的主要版本
• 使用 prettier

移除的特性

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

插件/加载器的变化

• 新的插件系统
  • 插件方法是向后兼容的
  • 插件现在应该使用Compiler.hooks.xxx.tap(<plugin name>，fn)
• 新版本的增强型解决方案
• 块的模板现在可以生成多个资源
• Chunk.chunks/parents/blocks不再是Arrays。在内部使用Set，并有方法来访问它。
• Parser.scope.renames和Parser.scope.definitions不再是Objects/Arrays，而是Map/Sets。
• 解析器使用StackedSetMap（类似于LevelDB的数据结构）而不是Arrays
• 在应用插件时不再设置Compiler.options
• 和谐相依性因重构而改变
• Dependency.getReference()现在可能返回一个弱属性。 Dependency.weak现在由Dependency基类使用，并返回到getReference()的基本实现中
• 所有模块的构造函数参数都已更改
• 将选项合并到ContextModule和resolveDependencies的选项对象中
• 更改并重命名import()的依赖关系
• 将Compiler.resolvers移入可通过插件访问的Compiler.resolverFactory
• Dependency.isEqualResource已被替换为Dependency.getResourceIdentifier
• Template上的方法现在是静态的
• 已添加新的RuntimeTemplate类，并且outputOptions和requestShortener已移至此类
  • 许多方法已经更新为使用RuntimeTemplate
  • 我们计划将访问运行时的代码移到这个新类中
• Module.meta已被Module.buildMeta替代
• 已添加Module.buildInfo和Module.factoryMeta
• Module的某些属性已被移入新对象中
• 添加了指向上下文选项的loaderContext.rootContext。装载器可以使用它来创建相对于应用程序根目录的东西。
• 当启用HMR时，将this.hot标志添加到加载器上下文中
• buildMeta.harmony已被替换为buildMeta.exportsType：“namespace
• 块图改变了：
  • 之前：块与父母 - 子女关系有关。
  • 现在：ChunkGroups与父-子关系连接。 ChunkGroups按顺序包含块。
  • 之前：AsyncDependenciesBlocks按顺序引用Chunks列表。
  • 现在：AsyncDependenciesBlocks引用一个ChunkGroup。
• file / contextTimestamps 现在是Maps
• map/foreach Chunks/Modules/Parents方法现在已被弃用/删除
• NormalModule接受构造函数中的选项对象
• 为NormalModule添加了所需的生成器参数
• 为NormalModuleFactory添加了createGenerator和generator器钩子以自定义代码生成
• 允许通过钩子为块定制渲染清单

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。