重大改变(Big changes)环境(Environment)不再支持Node.js 4。源码更新到更高的ecmascript环境版本。使用(Usage)您现在必须在两种模式之间选择(使用mode 或–mode):production 或 developmentproduction 模式使用了各种默认的优化配置去生成已经被优化的包development 支持 comments 和 hint,并启用devtool 的 evalproduction 不支持watching,development 针对快速增量重建进行了优化production 还可以实现模块连接(范围提升 Scope Hoisting)您也可以使用optimization.* 来做详细配置(构建您的自定义模式)process.env.NODE_ENV 被自动设置为 production 或 development(仅在构建的代码中,而不在配置中)有一个隐藏的无模式(–mode none)可以禁用所有内容语法(Syntax)import() 始终返回命名空间对象。 CommonJS模块包含在默认导出中如果您曾经使用import() 导入CommonJs,这可能会破坏您的代码配置(Configuration)您不再需要使用这些插件NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors(默认情况下在生产模式下打开)ModuleConcatenationPlugin -> optimization.concatenateModules(默认情况下在生产模式下启用)NamedModulesPlugin - > optimization.namedModules(默认情况下在开发模式下启用)CommonsChunkPlugin 被移除 -> optimization.splitChunks,optimization.runtimeChunkJSONwebpack现在可以本地处理JSON在将JSON通过loader转换为JS时,您可能需要添加 type: “javascript / auto"不使用loader 的情况下使用JSON 仍然有用允许通过ESM语法导入JSON通过 export 消除JSON模块是没用的(unused exports elimination for JSON modules)优化(Optimization)升级 uglifyjs-webpack-plugin 到 v1ES15 支持重大特性(Big features)模块(Modules)webpack 现在支持一下几种模块类型:javascript/auto: ( webpack 3中的默认值)启用了所有模块系统的Javascript模块:CommonJS,AMD,ESMjavascript/esm: EcmaScript模块,所有其他模块系统都不可用javascript/dynamic:只有CommonJS和EcmaScript模块不可用json: JSON数据,可通过require和import获得webassembly/experimental:WebAssembly模块(目前是实验性的)与javascript/auto 相比,javascript/esm 更严格地处理ESM:导入的模块需要存在导入名称动态模块(non-esm,即CommonJs)只能通过默认导入来导入,其他一切(包括 namespace import)都会发出错误在.mjs 模块中默认为javascript/esm WebAssembly 模块可以导入其他模块(JS和WASM)通过ESM导入验证WebAssembly模块的导出尝试从WASM导入不存在的导出时,您将收到警告/错误只能在异步块中使用。 它们在初始块中不起作用(对Web性能不利)通过import() 使用WASM导入模块这是一个实验性特征和变化主题优化(Optimization)sideEffects: false 在package.json 中被支持sideEffects 在package.json中还支持glob表达式和glob表达式数组使用JSONP数组而不是JSONP函数 -> 异步脚本标记支持,顺序不再重要引入了新的optimization.splitChunks 选项, 详情: https://gist.github.com/sokra…现在通过webpack 本身删除了无用分支之前:通过Uglify 删除了无用代码现在:通过webpack删除无用代码(在某些情况下)这可以防止在无用分支中发生import() 时崩溃语法(Syntax)import() 的magic comment支持webpackInclude 和webpackExclude。 它们允许在使用动态表达式时过滤文件。使用System.import() 现在会发出警告您可以设置Rule.parser.system: true 来禁用警告您可以设置Rule.parser.system: false 来禁用System.import配置(Configuration)现在可以使用module.rules[].resolve 配置解析。它可以与全局配置合并optimization.minimize 中已添加on/off 开关以切换最小化optimization.minimize 中已添加minimizers 和options 配置使用(Usage)验证了一些插件选项CLI已移至webpack-cli,您需要安装webpack-cli 才能使用CLIProgressPlugin(–progress)现在显示插件名称至少对于迁移到新插件系统的插件是可以的性能(Performance)UglifyJs 现在默认缓存(caches)和并行化(parallizes)多项性能改进,尤其适用于更快的增量重建RemoveParentModulesPlugin的性能改进统计统计信息可以显示嵌套在连接模块中的模块特性(Features)配置(Configuration)为mjs,json和wasm扩展自动选择模块类型。 其他扩展需要通过module.rules[].type 来配置不正确的options.dependencies 配置将抛出错误sideEffects 可以通过module.rules覆盖output.hashFunction 可以是自定义散列函数的构造函数出于性能原因,您可以提供非加密哈希函数添加output.globalObject 配置选项以允许在运行时exitCode 中选择全局对象引用运行时(Runtime)块(chunk)加载的错误现在包括更多信息和两个新属性类型(type)和请求(request)。Devtool从SourceMaps和eval中移除comment footer在eval source map devtool plugin中添加include test 和exclude 支持性能(Performance)webpacks AST可以直接从loader传递给webpack,以避免额外的解析未使用的模块不再做不必要的串联添加一个ProfilingPlugin,用于编写(Chrome)包含插件时序的配置文件使用for of 而不是forEach使用Map 和 Set 来代替Objects使用includes 来代替indexOf用字符串方法替换了一些RegExp队列中不会重复进入相同的任务默认情况下,使用更快的md4哈希进行散列优化(Optimization)当使用超过25个导出时,损坏的导出名称会更短。脚本标签不再是text/javascript和async,因为这是默认值(节省几个字节)连接模块现在产生的代码更少常量替换现在不需要__webpack_require__ 且省略了参数默认(Defaults)webpack 默认按此顺序查找.wasm,.mjs,.js和.json 扩展名output.pathinfo 现在默认在development 模式下开启in-memory 缓存在production 中默认关闭entry 默认指向路径 ./src在省略mode 选项时默认使用production 模式使用(Usage)向SourceMapDevToolPlugin 添加详细的进度报告删除插件时提供有用的错误消息统计(stats)在统计中大小的显示使用kiB 代替kB入口点(entrypoints)默认显示在统计信息中chunks 在统计中显示<{parents}> >{children}< 和 ={siblings}=添加buildAt 时间到统计中统计json 文件包含输出路径语法(Syntax)上下文(context)中支持资源查询在import() 中引用入口点(entry point)名称现在会发出错误而不是警告升级到acorn 5 并支持ES 2018插件(Plugins)done 现在是异步钩子Bug 修复(Bugfixes)生成的注释不在*/ 中中断webpack不再修改传递的选项对象(options object)Compiler “watch-run” hook 现在作为 Compiler 的第一个参数将output.chunkCallbackName 添加到schema 以允许配置Web Worker 模板使用module.id/loaded 正确地避免了模块链接(Module Concatentation)(Scope Hoisting)OccurenceOrderPlugin 现在按正确的顺序对模块进行排序(而不是颠倒)调用Watching.invalidate时,会从观察者读取文件的时间戳修正不正确的-! 在post loaders中添加run 和watchRun hooks for MultiCompiler在ESM 中this 显示undefinedVariableDeclaration 被正确识别为var,const或let当使用模块类型为javascript/dynamic 或javascript/module 时,Parser现在使用正确的资源类型(module/script)解析源代码。不在当buildMeta 为null的缺失模块时崩溃为electron targets 添加original-fs 模块HMRPlugin 可以在plugins 之外添加到Compiler 中内部变化(Internal changes)使用tap 调用替换了plugin 调用(新的插件系统)将许多已弃用的插件迁移到新的插件系统API为json模块添加了buildMeta.exportsType: “default"从Parser 中删除无用的方法(parserStringArray,parserCalculatedStringArray)移除清除BasicEvaluatedExpression 和多种类型的功能使用Buffer.from 代替 new Buffer避免使用forEach,使用for of 代替使用neo-async 代替async更新tapable 和enhanced-resolve 依赖关系到新的主要版本使用prettier移除特性(Removed features)移除 module.loaders移除 loaderContext.options移除 Compilation.notCacheable flag移除 NoErrorsPlugin移除 Dependency.isEqualResource移除 NewWatchingPlugin移除 CommonsChunkPluginplugins/loaders突破性更新(Breaking changes for plugins/loaders)全新的插件系统plugin 方法向后兼容插件中现在应该使用Compiler.hooks.xxx.tap(<plugin name>,fn)新的主要版本 - enhanced-resolveTemplates for chunks 现在可以生成多个资源(multiple assets)Chunk.chunks/parents/blocks 不再是Arrays。 内部使用Set,有方法可以访问它Parser.scope.renames 和 Parser.scope.definitions 不在使用 Objects/Arrays, 而是 Map/SetsParser 使用 StackedSetMap (类似LevelDB的数据结构) 代替 Arrays应用插件时不再设置Compiler.options由于重构,Harmony Dependencies已经改变Dependency.getReference() 现在可能返回一个weak 属性。Dependency.weak 现在由Dependency 基类使用,并在getReference() 的基本impl中返回所有Module 的构造函数参数都已更改将选项合并到ContextModule 和resolveDependencies的options对象中更改并重命名import() 的依赖项将Compiler.resolvers 移动到可通过插件访问的Compiler.resolverFactory 中Dependency.isEqualResource 已替换为Dependency.getResourceIdentifierTemplate 中的方法是静态的添加了一个新的RuntimeTemplate 类,并将outputOptions 和requestShortener 移动到此类许多方法已更新为使用RuntimeTemplate我们计划将访问运行时的代码移动到这个新类Module.meta 以及被替代为 Module.buildMeta已添加Module.buildInfo 和Module.factoryMetaModule 的某些属性已移至新对象中添加了指向context 选项的loaderContext.rootContext。 Loaders 可以使用它来创建相对于应用程序根目录的东西启用HMR时,将this.hot标志添加到loader 上下文buildMeta.harmony 已替换为buildMeta.exportsType: “namespace"chunk 图已更改:之前:Chunks 以父子关系相关联。现在:ChunkGroups 以父子关系相关联。 ChunkGroups 按顺序包含Chunks之前:AsyncDependenciesBlocks 按顺序引用Chunks 的列表现在:AsyncDependenciesBlocks 引用单个 ChunkGroupfile/contextTimestamps 现在是Mapsmap/foreach Chunks/Modules/Parents 方法已经被 废弃/移除NormalModule 接受Constructor中的选项对象(options object)为NormalModule 添加了必需的生成器参数为NormalModuleFactory 添加了createGenerator 和generator hooks 以自定义代码生成允许通过钩子自定义Chunks 的渲染清单参考webpack 4.0.0 release notes github原文