内置静态资源构建能力 —— Asset Modules

在 webpack 5 之前，通常使用：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 将文件复制发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。 asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

PS: webpack5自带 js 压缩功能，他内置了 terser-webpack-plugin 插件，我们不用再下载安装。而且在 mode=“production” 的时候会自动开启 js 压缩功能。

文件缓存

在webpack4中，使用 cache-loader 缓存一些性能开销较大的 loader ，或者是使用 hard-source-webpack-plugin 为模块提供一些中间缓存。在 Webpack5 之后，默认就为我们集成了一种自带的缓存能力（对 module 和 chunks 进行缓存）

cache: {
    // type 的可选值为： memory 使用内容缓存，filesystem 使用文件缓存。
    // 当 type=filesystem的时候设置cacheDirectory才生效。用于设置你需要的东西缓存放在哪里
    type: 'filesystem',
    // 默认缓存到 node_modules/.cache/webpack 中
    // 也可以自定义缓存目录，cache.cacheDirectory 选项仅当 cache.type 被设置成 filesystem 才可用。
    // cacheDirectory:path.resolve(__dirname,'node_modules/.cac/webpack'),
    buildDependencies : { 
    // 2. 将您的配置添加为 buildDependency 以使配置更改时缓存失效
    config : [ __filename ] 
  
    // 3. 如果您有其他构建所依赖的东西你可以在这里添加它们
    // 请注意，webpack、加载器和从你的配置中引用的所有模块都会自动添加
  } 
}

更好的treeshaking

未使用的导出内容不会被打包生成。 将 mode 工作模式改为 production 就会自动开启。

• 内部模块tree-shaking Webpack 5 有一个新的选项 optimization.innerGraph，在生产模式下是默认启用的，它可以对模块中的标志进行分析，找出导出和引用之间的依赖关系。

• 嵌套的tree-shaking Webpack能够跟踪对导出的嵌套属性的访问，因此可以改善重新导出命名空间对象时的 Tree Shaking；在webpack 4中，Tree Shaking 对嵌套的导出模块未使用代码无法很好进行 Tree Shaking，当然我们也可以借助一些plugin来实现，但是到了webpack 5得到了很大的改进。

• CommonJs Tree Shaking Webpack 5 增加了对一些 CommonJs 构造的支持，允许消除未使用的 CommonJs 导出，并从 require() 调用中跟踪引用的导出名称

模块联邦

允许多个 Webpack 一起工作，可以让跨应用间真正做到模块共享

模块联邦本身是一个普通的 Webpack 插件 ModuleFederationPlugin，插件有几个重要参数：

name 当前应用名称，需要全局唯一。 remotes 可以将其他项目的 name 映射到当前项目中。 exposes 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。 shared 是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。

使用Module Federation时，每个应用块都是一个独立的构建，这些构建都将编译为容器。 容器可以被其他应用或者其他容器应用。 一个被引用的容器被称为remote, 引用者被称为host，remote暴露模块给host, host则可以使用这些暴露的模块，这些模块被成为remote模块。

更好的hash算法

之前有 hash chunckhash contenthash 在 webpack 5中，把hash改成了fullhash。

hash/fullhash 是根据打包中的所有文件计算出来的 hash 值，在一次打包中，所有的资源出口文件的filename获得的[hash]都是一样的。

webpack 4对于添加注释和修改变量名，是会影响它的一个contenthash值的计算，如果是webpack 5的话，就不会影响。