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

重大更新

• 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版本是超稳定的...

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

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