前言
纯手打翻译, 也有小部分比较生硬的翻译, 原谅那部分我也没太懂
大改动
环境
不在支持 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
允许通过 ESM 语法导入 JSON
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 表达式数组
JSONP 数组已经代替 JSONP 函数使用 -> 异步脚本标记支持, 顺序不再重要
添加新的选项
optimization.splitChunks
详情: gist.github.com/sokra/1522d
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 中选择全局对象引用
运行时
错误的 chunk 加载现在会有包含更多的信息和两个新属性 type 和 request
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 模式
语法
上下文支资源查询
在 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 时, 用正确的源代码 (模块 / 脚本) 来解析源代码
在遇到 buildMetaof 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
JavaScript
前端
Webpack
JSON
12
来源: https://juejin.im/post/5a951bf851882524d842ec8b