webpack-4.0更新日志(翻译)

8,224 阅读8分钟

前言

纯手打翻译,也有小部分比较生硬的翻译,原谅那部分我也没太懂😂

大改动

  • 环境

    不在支持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() 支持黑科技般的注释: webpackIncludewebpackExclude

      他们允许你在使用动态表达式导入的时候过滤掉一些文件。

    • 使用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加载现在会有包含更多的信息和两个新属性typerequest
  • devtool
    • 在sourcemaps和eval里面移除了底部注释
    • 在eval的soucemap里面添加了include testexclude的支持
  • 性能
    • webpack的AST可以被正确的在loader中传递,以避免额外重复的语法分析
    • 没有被使用的模块将不再被关联
    • 添加一个ProfillingPlugin插件,可以写(Chrome)包含timings的profile文件
    • 迁移, 用for of代替forEach
    • 迁移, 用MapSet代替Objects
    • 迁移,用includes代替indexOf
    • 用正则表达式替换掉一些字符串方法
    • 队列不再查询同一个作业两次
    • 默认使用更快的md4 hash来做hashing
  • 优化
    • 当使用超过25个导出的时候会使导出的名字更短
    • script标签不再加入text/javascriptasync,因为他们是默认值(节省一些字节)
    • 串联的模块会生成更少的代码
    • 常量替换现在不需要__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中添加runwatchRun钩子
  • 在ESM中this会是undefined
  • 可以通过var,let,const来进行正确的变量声明
  • 解析器现在在使用模块类型javascript/dynamicjavascript/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.renamesParser.scope.definitions不在是Object/Array,而是 Map/Set.
  • 解析器使用StackedSetMap(LevelDB形式的数组结构)代替数组
  • 当应用插件的时候不再设置Compiler.options
  • 由于重构,和谐的依赖关系已经发生改变
  • Dependency.getReference() 现在将返回一个 weak 属性. Dependency.weak 现在被 Dependency的基类使用 并且在 getReference()内部基础impl中返回
  • 构造器的参数对所有的module改变
  • 合并ContextModuleresolveDependencies中的选项
  • 改变并且重命名import()里面的依赖
  • 迁移Compiler.resolversCompiler.resolverFactory以使插件可以访问到
  • Dependency.isEqualResourceDependency.getResourceIdentifier替换
  • Template里面的方法现在是静态方法
  • 新增一个新的 RuntimeTemplate 类,outputOptionsrequestShortener迁移到这个类里面
    • 许多方法更新成用RuntimeTemplate替代
    • 我们计划移动那些可以访问到运行时的代码到一个新类
  • Module.metaModule.buildMeta替代
  • 新增Module.buildInfoModule.factoryMeta
  • Module的一些属性被移动到一个新的对象
  • 添加那个指向context选项的loaderContext.rootContext。 loaders可能需要用它去创建相对于程序根的内容
  • 新增this.hot标记到loader上下文,当HMR开启的时候
  • buildMeta.harmonybuildMeta.exportType: "namespace"替代
  • chunk图已经改变:
    • 之前:chunks之间是通过父子关系关联
    • 现在: chunk组通过父子关系关联,chunk组包含chunks
    • 之前: 异步依赖的块引用一组chunks
    • 现在: 异步依赖引用的是单个chunk组
  • file/contextTimstamps现在是Maps
  • map/foreach Chunks/Modules/Parents方法已经被移除
  • NormalModule 接收构造器里面的选项对象
  • 添加必要的生成参数给NormalModule
  • 在NormalModuleFactory里面添加createGeneratorgenerator钩子以自定义代码生成
  • 允许通过钩子自定义地渲染Chunks的mainfest