webpack-4.0更新日志（翻译）

前言

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

大改动

• 环境

  不在支持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