[原文链接]http://feclub.cn/post/content/webpack4

官方链接webpack4.0

大改动

  • 环境
    • 不再支持Nodejs 4。源代码已经更新到一个较高的ECMAscript版本。
  • 用法
    • 现在必须选择在 production 或 development 这两种模式中选择一种，参数 mode或--mode
      • production 模式会生成最优化的包（bundles）
      • development 模式开放注释和提示，并开启eval devtool功能
      • production 模式不支持监听模式，development 模式拥有更快速的增量构建
      • production 模式也可以把多个模块打包，Scope Hoisting（作用域提升）
      • 可以通过optimization.* 的方式去设定更详细的配置（搭建你的自定义模式）
      • process.env.NODE_ENV 变量已经在 production 和 development 两种模式中被设置了（只在构建的代码里面，不在配置里）
      • 有一种隐藏none模式可以禁用所有内容
  • 语法
    • import() 总是返回一个带命名空间的对象。CommonJS模块会被包在export default 中。
      • 如果使用import()的方式去导入你的CommonJS模块，这可能会破坏你的代码
  • 配置
    • 您不再需要使用这些插件：
      • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors（production模式默认开启）
      • ModuleConcatenationPlugin -> optimization.concatenateModules（production模式默认开启）
      • NamedModulesPlugin -> optimization.namedModules（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 默认值） 所有的 JS 模块规范都可用：CommonJS，AMD，ESM
      • javascript/esm ：EcmaScript 模块规范，其它的模块规范都不可用 (.mjs 文件的默认值)
      • javascript/dynamic: 仅支持 CommonJS 和 AMD，EcmaScript 模块规范不可用
      • json: JSON 数据，使用 require 和 import 导入 JSON 数据时可用 （.json 文件的默认值）
      • webassembly/experimental： WebAssembly 模块（当前还是实验版本）
    • javascript/esm 处理 ESM 时候会比 javascript/auto 更加严格。
      • 模块导入进来的名字，必须要在模块中存在。
      • 动态模块（非esm，比如CommonJS）只能通过 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
      Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
    • 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 可以正确的跳出模块链接Scope Hoisting（作用域提升）
  • 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