👉

Next.js 10.0.6以降のwebpack5設定方法

2021/03/03に公開

以前の設定方法

v9.5.0でリリースされた通り、package.jsonのresolutionsにv5のwebpackをもつように設定することで、内部でwebpackのversionを検知して、条件分岐する仕様になっていました。

// package.json
{
 "resolutions": {
   "webpack": "^5.0.0-beta.30"
 }
}

新しい設定方法

v10.0.6から、Next.jsを使用しているappliactionに破壊的な変更を引き起こさずにwebpackをv4からv5へ移行するために、両方をバンドルに含むように変更されました。
よって、Next.jsのビルドの際にはこの内部のwebpackが使用されるため、どちらのversionを使用するかの選択も内部の機能として設けられました。

// next.config.js
module.exports = {
  future: { webpack5: true }
}

Timのコメントが参考になります。

デグレ

  • worker-loaderが動かなくなる issue
    webpackのinline化に伴って、worker-loaderが使用している内部モジュールが動かなくなっている。
    対応するPRも上がっているので、対応に時間はかからないと思うが、自分が管理するレポジトリの一つはworker-loaderを使用した処理があったので移行できませんでした。

Discussion