携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

清除输出目录

webpack5清除输出目录开箱可用，无须安装clean-webpack-plugin，具体做法如下：

module.exports = {
  output: {
    clean: true
  }
}

top-level-await

webpack5现在允许在模块的顶级代码中直接使用await

// src/index.js
const resp = await fetch("http://www.baidu.com");
const jsonBody = await resp.json();
export default jsonBody;

目前，top-level-await还未成为正式标准，因此，对于webpack5而言，该功能是作为experiments发布的，需要在webpack.config.js中配置开启

// webpack.config.js
module.exports = {
  experiments: {
    topLevelAwait: true,
  },
};

打包体积优化

webpack5对模块的合并、作用域提升、tree shaking等处理更加智能

打包缓存开箱即用

在webpack4中，需要使用cache-loader缓存打包结果以优化之后的打包性能

而在webpack5中，默认就已经开启了打包缓存，无须再安装cache-loader

默认情况下，webpack5是将模块的打包结果缓存到内存中，可以通过cache配置进行更改

const path = require("path");

module.exports = {
  cache: {
    // 缓存类型，支持：memory、filesystem
    type: "filesystem", 
    // 缓存目录，仅类型为 filesystem 有效
    cacheDirectory: path.resolve(__dirname, "node_modules/.cache/webpack"), 
  },
};

关于cache的更多配置参考：webpack.docschina.org/configurati…

资源模块

在webpack4中，针对资源型文件我们通常使用file-loader、url-loader、raw-loader进行处理

由于大部分前端项目都会用到资源型文件，因此webpack5原生支持了资源型模块

详见：webpack.docschina.org/guides/asse…

资源模块 webpack 4.0 中我们想对 png、mp3、woff2 等资源进行处理时，需要利用 url-loader 来处理。在 webpack 5.0 中内置了对静态资源的处理，添加了 4种 新的模块类型，如下：

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