webpack-4.0更新日志
webpack-4.0更新日志(翻译)
前言
纯手打翻译,也有小部分比较生硬的翻译,原谅那部分我也没太懂😂
大改动
-
环境
不在支持Nodejs 4。源代码已经更新到一个较高的ecmascript版本。
-
使用
- 你必须在两种模式中选择一个(
mode
或者--mode
): production 或者 development- production 会开放所有优化功能去创建一个最优化的包
- development 开放注释和提示,并开启eval devtool功能
- production 不支持监听模式,development拥有着更快速的增量构建
- 你可以通过
optimization.*
的方式去设定更详细的配置(搭建你的自定义模式) process.env.NODE_ENV
变量已经在production和development两种模式中被设置了(只在构建的代码里面,不在配置里)- 还有一种隐藏的
none
模式, 这种模式禁用了所有东西
- 你必须在两种模式中选择一个(
-
语法
import()
永远都会返回一个带命名空间的对象。CommonJS模块会被包成export的default里面。- 这个很可能会破坏你的代码,如果你使用
import()
的方式去导入你的CommonJS代码。
- 这个很可能会破坏你的代码,如果你使用
-
配置
- 你不在需要使用这些插件:
NoEmitOnErrorsPlugin
->optimization.noEmitOnErrors
(production模式默认开启)ModuleConcatenationPlugin
->optimization.concatenateModules
(production模式默认开启)NameModulesPlugin
->optimization.nameModules
(development模式默认开启)
CommonsChunkPlugin
已经被移除 ->optimization.splitChunks
,optimization.runtimeChunk
- 你不在需要使用这些插件:
-
JSON
- webpack现在能处理原生的json
- 当你需要通过loader去把json转换成js的时候,你可能需要添加
type:"javascript/auto"
- 不使用loader也可以直接使用JSON
- 当你需要通过loader去把json转换成js的时候,你可能需要添加
- 允许通过ESM语法导入JSON
- JSON模块的未使用的导出部分会被消除
- webpack现在能处理原生的json
-
优化
- 更新
uglifyjs-webpack-plugin
到v1- ES2015支持
- 更新
大功能
-
模块
-
webpack现在支持下面的模块类型:
-
javascript/auto:(webpack 3中的默认类型) 所有模块里面的javascript模块
系统支持: CommonJS, AMD, ESM
-
javascript/esm: EcmaScript模块,所有的其他系统模块类型将获取不到
-
javascript/dynamic: 只有CommonJS和EcmaScript的模块将获取不到
-
json: JSON数据, 可以通过require或者import获取
-
webassembly/experimental: WebAssembly 模块(当前还是实验版本)
-
-
javascript/esm
处理ESM的时候回避javascript/auto
更严格-
导入进来的名字需要需要在导入的模块中存在
-
动态模块(非esm,比如CommonJS)只能通过import的default里面获得
其他所有的方式(包括命名空间的导入)都会报错。
-
-
在
.mjs
的模块里面将默认使用javascript/esm
模式 -
WebAssembly模块
- 可以导入其他模块(JS和WASM)
- 从WebAssembly导出的模块会经过ESM导入验证
- 当你从WASM的导出内容里面尝试导入一个不存在的内容的时候将会活动的警告/错误提示。
- 只能用在异步加载chunk里面,在初始化的chunk里面不能正常工作。(对页面性能影响很大)。
- 通过
import()
的方式去导入WASM模块
- 通过
-
-
优化
-
sideEffects: false
现在已经支持在package.json里面使用- package.json里面
sideEffect
允许使用glob表达式和glob表达式数组
- package.json里面
-
JSONP数组已经代替JSONP函数使用 -> 异步脚本标记支持, 顺序不再重要。
-
添加新的选项
optimization.splitChunks
-
webpack自身移除了废弃的分支代码
- 之前:Uglify移除掉不用的代码
- 现在: webpack移除掉不用的代码(相同情况下)
- 当遇到废弃的分支代码里面含有
import()
将会停止移除操作。
-
-
语法
-
import()
支持黑科技般的注释:webpackInclude
和webpackExclude
。他们允许你在使用动态表达式导入的时候过滤掉一些文件。
-
使用
System.import()
将会提示警告- 你可以通过
Rule.parser.system:true
关闭掉这些警告 - 你可以通过
Rule.parser.sustem:false
来禁用System.import
- 你可以通过
-
-
配置
- 可以通过
module.rules[].resolve
来配置解析方式。这将会跟全局的配置合并到一起。 optimization.minimize
已经被添加到配置里面,通过其开关最小化/压缩功能。- 默认在production模式中开启,默认在development模式中关闭
optimization.minimizer
已经被添加到配置里面,通过其去设置压缩处理程序和选项。
- 可以通过
-
使用
- 一些插件的选项已经失效
- CLI已经迁移到了webpack-cli,你需要安装webpack-cli才能使用CLI
- ProgressPlugin插件 (--progress) 现在会打印显示插件的名字
- 至少对已经迁移到新插件系统的插件来说
-
性能
- UglifyJs现在默认缓存和并行化
- 许多的性能提升,尤其是更快的增量构建
- RemoveParentModulesPlugin的性能提升
-
Stats
Stats现在会在有串联的模块中打印显示层级嵌套
功能
- 配置
- 模块类型会自动在mjs,json和wasm扩展中自动选择。其他扩展需要通过
module.rules[].type
中配置。 - 错误的
options.dependencies
配置会抛出错误。 sideEffects
可以通过module.rules覆盖output.hashFunction
现在可以是一个自定义的hash处理函数- 由于性能原因,您可以提供一个非cryto散列函数
- 添加
output.globalObject
config选项,以允许在运行时exitCode中选择全局对象引用
- 模块类型会自动在mjs,json和wasm扩展中自动选择。其他扩展需要通过
- 运行时
- 错误的chunk加载现在会有包含更多的信息和两个新属性
type
和request
- 错误的chunk加载现在会有包含更多的信息和两个新属性
- devtool
- 在sourcemaps和eval里面移除了底部注释
- 在eval的soucemap里面添加了
include
test
和exclude
的支持
- 性能
- webpack的AST可以被正确的在loader中传递,以避免额外重复的语法分析
- 没有被使用的模块将不再被关联
- 添加一个ProfillingPlugin插件,可以写(Chrome)包含timings的profile文件
- 迁移, 用
for of
代替forEach
- 迁移, 用
Map
和Set
代替Objects - 迁移,用
includes
代替indexOf
- 用正则表达式替换掉一些字符串方法
- 队列不再查询同一个作业两次
- 默认使用更快的md4 hash来做hashing
- 优化
- 当使用超过25个导出的时候会使导出的名字更短
- script标签不再加入
text/javascript
和async
,因为他们是默认值(节省一些字节) - 串联的模块会生成更少的代码
- 常量替换现在不需要
__webpack_require__
和参数已经删除
- 默认
- webpack现在会按
.wasm
,.mjs
,.js
,.json
扩展的顺序寻找文件 output.pathinfo
现在是development模式默认开启- production模式默认关闭内存缓存
entry
默认指向./src
output.path
默认指向./dist
- 不指定mode的时候默认使用production模式
- webpack现在会按
- 语法
- 上下文支资源查询
- 在
import()
里面应用一个入口节点的名字会从警告变成错误提示 - 更新acorn5以支持ES2018
- 插件
done
现在是一个异步钩子
Bug修复
- 创建注释的时候不会再因为遇到*/而被打断
- webpack不再修改已经过去的选项对象
- 编译器"watch-run"钩子现在包含编译器自身作为第一个参数
- 添加
output.chunkCallbackName
以允许配置webworker模板 - 使用
mdoule.id/loaded
可以正确的跳出模块链接(作用域提升) - OccurenceOrderPlugin现在能正确的对模块进行排序(而不是相反)
- 当调用
Watching.invalidate
时,文件的时间戳是从监听器中获取 - 修复post loader中的不正确的
-!
行为 - 在
MultiCompiler
中添加run
和watchRun
钩子 - 在ESM中
this
会是undefined
- 可以通过
var
,let
,const
来进行正确的变量声明 - 解析器现在在使用模块类型
javascript/dynamic
或javascript/module
时,用正确的源代码(模块/脚本)来解析源代码。 - 在遇到
buildMeta
of Null丢失模块的时候不会打断 - 在electron target中添加
original-fs
模块 - HMRPlugin 可以在
plugins
之外添加到编译器中
内部改动
- 使用
tap
调用来替换plugin
调用(新插件系统) - 迁移许多遗弃的插件到新的插件系统API中
- 添加
buildMeta.exprotsType:default
到json模块中 - 移除解析器中不用的函数(parserStringArray, parserCalculatedStringArray)
- 移除清除
BasicEvaluatedExpression
和具有多个类型的能力 - 使用Buffur.from替换new Buffer
- 避免使用forEach而是使用for of
- 用
neo-async
代替async
- 将可利用和增强-解析依赖项更新到新的主版本
- 使用Prettier
移除的功能
-
移除
module.loaders
-
移除
loaderContext.options
-
移除
Compliation.notCacheable
标记 -
移除
NoErrorsPlugin
-
移除
Dependency.isEqualResource
-
移除
NewWatchingPlugin
-
移除
CommonsChunkPlugin
破坏性的变更, 针对插件/loader
- 新的插件系统
plugin
方法向后兼容- 插件应该使用
Compiler.hooks.xxx.tap(<plugin name>, fn)
- 新的主版本增强型解析
- chunks的模板现在可以生成多个assets
Chunk.chunks/parents/blocks
现在不在是数组。内部使用一个Set,并且有方法可以访问到它。Parser.scope.renames
和Parser.scope.definitions
不在是Object/Array,而是 Map/Set.- 解析器使用
StackedSetMap
(LevelDB形式的数组结构)代替数组 - 当应用插件的时候不再设置
Compiler.options
- 由于重构,和谐的依赖关系已经发生改变
Dependency.getReference()
现在将返回一个weak
属性.Dependency.weak
现在被Dependency
的基类使用 并且在getReference()
内部基础impl中返回- 构造器的参数对所有的
module
改变 - 合并
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
的一些属性被移动到一个新的对象- 添加那个指向
context
选项的loaderContext.rootContext
。 loaders可能需要用它去创建相对于程序根的内容 - 新增
this.hot
标记到loader上下文,当HMR开启的时候 buildMeta.harmony
被buildMeta.exportType: "namespace"
替代- chunk图已经改变:
- 之前:chunks之间是通过父子关系关联
- 现在: chunk组通过父子关系关联,chunk组包含chunks
- 之前: 异步依赖的块引用一组chunks
- 现在: 异步依赖引用的是单个chunk组
- file/contextTimstamps现在是Maps
map/foreach
Chunks/Modules/Parents
方法已经被移除- NormalModule 接收构造器里面的选项对象
- 添加必要的生成参数给NormalModule
- 在NormalModuleFactory里面添加
createGenerator
和generator
钩子以自定义代码生成 - 允许通过钩子自定义地渲染Chunks的mainfest