webpack4.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器钩子以自定义代码生成
- 允许通过钩子为块定制渲染清单
更多相关文章
- 偷学Python第二十九｜time模块和calendar模块详细用法
- 万字长文详解Python正则表达式及re模块
- 偷学Python二十六｜OS.path模块的详细使用说明
- Python内置OS模块用法详解
- python中那些小众但有用的内置模块
- 十分钟学会reqests模块爬取数据——从爬取疫情数据说起
- php怎么把文件设置为插件
- PHP网络请求插件Guzzle使用
- php+javascript实现用户注册模块（附源码）