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

疯狂的技术宅

发布于 2019-03-27 11:59:26

2.7K0

文章被收录于专栏：京程一灯京程一灯

翻译：疯狂的技术宅原文作者：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器钩子以自定义代码生成
允许通过钩子为块定制渲染清单

往期精选文章
使用虚拟dom和JavaScript构建完全响应式的UI框架
扩展 Vue 组件
使用Three.js制作酷炫无比的无穷隧道特效
一个治愈JavaScript疲劳的学习计划
全栈工程师技能大全
WEB前端性能优化常见方法
一小时内搭建一个全栈Web应用框架
干货：CSS 专业技巧
四步实现React页面过渡动画效果
让你分分钟理解 JavaScript 闭包