最新发布！webpack 4.0.0-alpha.0 特性

Posted 2021-04-29 前端先锋

重大更新

• Node.js 4不再受到支持。源代码被升级到更高的ecmascript版本。

• 你现在可以使用(mode 或 --mode) 在两种模式之间选择：生产模式或开发模式

• WIP：在开发模式中增加提示

• 生产模式能够通过各种手段来生成优化的捆绑包

• 开发模式使开发过程中能够使用注释和提示和eval devtool

• 生产模式不支持watching，开发模式被优化为快速增量重建

• 生产模式也使模块连接（范围提升）

• 你可以使用optimization.*标志详细配置此功能（构建你的自定义模式）

• process.env.NODE_ENV 被设置为生产或开发（只在构建代码中，而不是在配置中）

• 有一个隐藏的 none 模式，禁用一切

• import() 总是返回一个名称空间对象。 CommonJS模块被封装到默认导出中

• 如果你用 import()导入CommonJs可能会破坏你的代码

• 你不再需要使用这些插件：

• NoEmitOnErrorsPlugin - > optimize.noEmitOnErrors（在生产模式下默认打开）

• ModuleConcatenationPlugin - > optimize.concatenateModules（默认处于生产模式）

• webpack现在处理JSON不同

• 将JSON通过加载器转换为JS时，可能需要添加type:"javascript / esm"

• 只使用JSON而没有加载器应该仍然可以工作

重要特性

• webpack现在支持这些模块类型：

• javascript / auto：（在webpack 3中默认的）启用了所有模块系统的Javascript模块：CommonJS，AMD，ESM

• javascript / esm：EcmaScript模块，所有其他模块系统不可用

• json：JSON数据，JSON数据传递不变，不被解析

• webassembly / experimental：WebAssembly模块（目前是实验性的）

• 与javascript / auto相比，javascript / esm处理更严格的ESM：

• 导入的名称需要在导入的模块上存在

• 非ESM只能通过默认导入导入，其他所有（包括命名空间导入）都会发出错误

• 在.mjs模块中

• 使用javascript/esm

• 进口需要有一个扩展。 没有扩展尝试。

• sideEffects：false在package.json中受支持

• 使用JSONP数组而不是JSONP函数->异步支持

• WIP：还没有办法将运行时移动到另一个块

• webpackInclude和webpackExclude被import()的魔法注释支持。 它们允许在使用动态表达式时过滤文件。

• 现在可以使用module.rules[].resolve来配置解析。 它与全局配置合并。

• Sone Plugin选项现在已经过验证

• WIP：更好的输出，没有进程退出，堆栈跟踪，更多的插件

• 多重性能改进，特别是对于更快的增量重建

特性

• 通过CLI添加的插件预先优先于配置插件

• 模块类型自动选择为mjs，json和wasm扩展名。其他扩展需要通过module.rules [].type进行配置

• 添加指向上下文选项的loaderContext.rootContext。装载器可以使用它来创建相对于应用程序根目录的东西。

• 块加载错误现在包含更多信息和两个新的属性type和request。

• 不正确的options.dependencies配置现在会抛出错误

• webpacks AST 可以直接从加载器传递给webpack以避免额外的解析

• 当使用超过25个出口时，出口名称变短。

• webpack现在按此顺序查找.wasm，.mjs，.js和.json扩展名

• 现在尺寸显示为kiB，而不是统计中的kB

• 上下文支持资源查询

• 在开发模式下，output.pathinfo默认处于开启状态

• 内存缓存在生产中默认关闭

• 脚本标签不再是text/JavaScript和async，因为这是默认值（保存几个字节）

修复的bug

• 生成的注释不再丢失 */

• webpack不再修改传递的选项对象

• 编译器“watch-run”钩子没有编译器作为第一个参数

• 将chunkCallbackName添加到模式以允许配置WebWorker模板

移除的特性

• 移除 module.loaders

• 移除 loaderContext.options

• 移除 Compilation.notCacheable flag

• 移除 NoErrorsPlugin

• 移除 Dependency.isEqualResource

• 移除 NewWatchingPlugin

中断的插件修改

• 新的插件系统

• plugin方法是向后兼容的

• 插件现在应该使用Compiler.hooks.xxx.tap(<plugin name>, fn)

• 增强解决方案的新主要版本

• 块的模板现在可以生成多个资产

• chunk.chunks/parents/blocks不再是数组。一个集合在内部使用，并有方法来访问它。

• Parser.scope.renames和Parser.scope.definitions不再是对象/数组，而是映射/集合。

• 解析器使用StackedSetMap（类似于LevelDB的数据结构）而不是数组

• 在应用插件时不再设置Compiler.options

• 和谐相依性因重构而改变

• Dependency.getReference()现在可能返回一个weak属性。 Dependency.weak现在被Dependency基类使用，并在getReference()的基本实现中返回

• 为所有模块更改构造函数参数

• 将选项合并到ContextModule和resolveDependencies的选项对象中

• 更改和重命名import()的依赖关系

• 将Compiler.resolvers移入可通过插件访问的Compiler.resolverFactory

• Dependency.isEqualResource已被替换为Dependency.getResourceIdentifier

不兼容的插件

html-webpack-plugin: 插件系统升级 (jantimon/html-webpack-plugin#816)请提交意见

不兼容的加载器

• file-loader -> Workaround A

• vue-loader -> Workaround A

• ejs-loader -> Workaround A

• eslint-loader -> Workaround A请提交意见

缺失的特性

请提交意见

解决方法：

Workround A

对于不能使用this.options迁移的加载器：

  
  new LoaderOptionsPlugin({
    options: {
      context: process.cwd() // or the same value as `context`
    }
  })

不要指望这个alpha版本是超稳定的...

---

如果您在更改日志中发现其他更改，请发表评论

---

往期精选文章

---

---

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