likes
comments
collection
share

webpack-4.0更新日志（翻译）

作者站长头像
站长
· 阅读数 112

前言

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

大改动

  • 环境

    不在支持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
转载自:https://juejin.cn/post/6844903567606677518
评论
请登录