升级Next.js12后Webpack5报错，Webpack4升5需做哪些额外适配？

Webpack 4 升 5 适配修改点 #

你遇到的两个报错都来自Webpack 5的不兼容变更，按以下步骤修改即可解决：

1. 替换废弃的config.node.fs配置
   Webpack 5 已经移除了Webpack 4中config.node下的核心模块polyfill配置项，包括fs、path等，你代码里对应的这段需要删掉：

if (!isServer) {
  config.node = {
    fs: "empty",
  };
}

如果客户端确实需要禁用fs模块，改用resolve.fallback配置：

if (!isServer) {
  config.resolve.fallback = {
    fs: false,
    // 其他需要禁用的node核心模块都可以加在这里
  };
}

2. 替换第三方loader为Webpack 5内置Asset模块
   Webpack 5已经内置了资源处理能力，不需要再安装url-loader、raw-loader这类第三方loader，原来的两条rule配置可以改成：

// 替换原来的url-loader配置
config.module.rules.push({
  test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 100 * 1024 // 对应原来的100000字节限制
    }
  },
  generator: {
    filename: '[name].[ext]'
  }
});
// 替换原来的raw-loader配置
config.module.rules.push({
  test: /\.md$/,
  type: 'asset/source'
});

修改完成后可以卸载项目依赖中的url-loader、raw-loader。
3. 更新过时的Next.js插件
你当前使用的@zeit/next-bundle-analyzer已经废弃，不再适配Next.js 12，直接卸载该依赖，改用Next.js 12内置的打包分析能力即可，构建时加环境变量ANALYZE=true就能触发分析，对应原来的bundleAnalyzerConfig也可以替换为官方原生配置。
另外可以确认next-videos、@next/mdx都升级到了支持Webpack 5的版本，避免老版本插件生成不符合规范的rule，触发你遇到的loader应为非空字符串报错。

内容的提问来源于stack exchange，提问作者minimin_bamm