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.splitChunksoptimization.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自己删除
  • 语法
    • webpackIncludewebpackExclude受到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 testexclude的支持
  • 性能
    • webpack AST可以直接从加载器传递给webpack以避免额外的解析
    • 未使用的模块不再不必要地连接起来
    • 添加一个ProfilingPlugin,它写入一个包含插件时间的(Chrome)配置文件
    • 使用for of而不是forEach
    • 使用mapset而不是对象
    • 使用includes而不是indexOf
    • 用字符串方法替换了一些RegExp
    • Queue不会再次把同一个job存入队列
    • 默认情况下,使用更快的md4散列进行散列
  • 优化
    • 当使用超过25个exports时,exports名称变短。
    • 脚本标签不再是text/javascriptasync,因为这是默认值(保存几个字节)
    • 串联模块现在生成更少的代码
    • 常量替换现在不需要__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被正确识别为varconstlet
  • 当模块类型为javascript/dynamicjavascript/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.renamesParser.scope.definitions不再是Objects/Arrays,而是Map/Sets。
  • 解析器使用StackedSetMap(类似于LevelDB的数据结构)而不是Arrays
  • 在应用插件时不再设置Compiler.options
  • 和谐相依性因重构而改变
  • Dependency.getReference()现在可能返回一个弱属性。 Dependency.weak现在由Dependency基类使用,并返回到getReference()的基本实现中
  • 所有模块的构造函数参数都已更改
  • 将选项合并到ContextModuleresolveDependencies的选项对象中
  • 更改并重命名import()的依赖关系
  • Compiler.resolvers移入可通过插件访问的Compiler.resolverFactory
  • Dependency.isEqualResource已被替换为Dependency.getResourceIdentifier
  • Template上的方法现在是静态的
  • 已添加新的RuntimeTemplate类,并且outputOptionsrequestShortener已移至此类
    • 许多方法已经更新为使用RuntimeTemplate
    • 我们计划将访问运行时的代码移到这个新类中
  • Module.meta已被Module.buildMeta替代
  • 已添加Module.buildInfoModule.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添加了createGeneratorgenerator器钩子以自定义代码生成
  • 允许通过钩子为块定制渲染清单

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



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

原文发布于微信公众号 - 京程一灯(jingchengyideng)

原文发表时间:2018-02-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券