Add initial configuration changes for webpack 5

packages/next/build/webpack-config.ts

@@ -52,6 +52,9 @@ import WebpackConformancePlugin, {
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
+// @ts-ignore webpack version is exposed this way
+const isWebpack5 = parseInt(webpack.version) === 5
+
 const escapePathVariables = (value: any) => {
   return typeof value === 'string'
     ? value.replace(/\[(\\*[\w:]+\\*)\]/gi, '[\\$1\\]')
@@ -276,7 +279,8 @@ export default async function getBaseWebpackConfig(
       ...getOptimizedAliases(isServer),
     },
     mainFields: isServer ? ['main', 'module'] : ['browser', 'module', 'main'],
-    plugins: [PnpWebpackPlugin],
+    // webpack 5 has the PnP resolver built-in
+    plugins: isWebpack5 ? [] : [PnpWebpackPlugin],
   }
 
   const webpackMode = dev ? 'development' : 'production'
@@ -687,8 +691,12 @@ export default async function getBaseWebpackConfig(
         return '[name]'
       },
       libraryTarget: isServer ? 'commonjs2' : 'var',
-      hotUpdateChunkFilename: 'static/webpack/[id].[hash].hot-update.js',
-      hotUpdateMainFilename: 'static/webpack/[hash].hot-update.json',
+      hotUpdateChunkFilename: isWebpack5
+        ? 'static/webpack/[id].[fullhash].hot-update.js'
+        : 'static/webpack/[id].[hash].hot-update.js',
+      hotUpdateMainFilename: isWebpack5
+        ? 'static/webpack/[fullhash].hot-update.json'
+        : 'static/webpack/[hash].hot-update.json',
       // This saves chunks with the name given via `import()`
       chunkFilename: isServer
         ? `${dev ? '[name]' : '[name].[contenthash]'}.js`
@@ -866,7 +874,8 @@ export default async function getBaseWebpackConfig(
               new NextJsRequireCacheHotReloader(),
             ]
 
-            if (!isServer) {
+            // webpack 5 has built-in module caching
+            if (!isServer && !isWebpack5) {
               const AutoDllPlugin = require('next/dist/compiled/autodll-webpack-plugin')(
                 distDir
               )
@@ -891,18 +900,12 @@ export default async function getBaseWebpackConfig(
             return devPlugins
           })()
         : []),
-      !dev && new webpack.HashedModuleIdsPlugin(),
+      // webpack 5 uses deterministic module ids automatically in production
+      !isWebpack5 && !dev && new webpack.HashedModuleIdsPlugin(),
       !dev &&
         new webpack.IgnorePlugin({
-          checkResource: (resource: string) => {
-            return /react-is/.test(resource)
-          },
-          checkContext: (context: string) => {
-            return (
-              /next-server[\\/]dist[\\/]/.test(context) ||
-              /next[\\/]dist[\\/]/.test(context)
-            )
-          },
+          resourceRegExp: /react-is/,
+          contextRegExp: /(next-server|next)[\\/]dist[\\/]/,
         }),
       isServerless && isServer && new ServerlessPlugin(),
       isServer && new PagesManifestPlugin(isLikeServerless),
@@ -995,6 +998,13 @@ export default async function getBaseWebpackConfig(
     )
   }
 
+  if (isWebpack5) {
+    // @ts-ignore this property is the default in webpack 5
+    delete webpackConfig.output.futureEmitAssets
+    // @ts-ignore webpack 5 no longer polyfills node.js modules
+    delete webpackConfig.node.setImmediate
+  }
+
   webpackConfig = await buildConfiguration(webpackConfig, {
     rootDirectory: dir,
     customAppFile,
@@ -1251,5 +1261,16 @@ export default async function getBaseWebpackConfig(
     webpackConfig.entry = await (webpackConfig.entry as webpack.EntryFunc)()
   }
 
+  // in Webpack 5 the 'var' libraryTarget output requires a name
+  // TODO: this should be revisited as 'var' was only used to not have the initial variable exposed
+  // In webpack 4 not setting the library option would result in the bundle being a self-executing function without the variable
+  if (!isServer && isWebpack5) {
+    // @ts-ignore
+    webpackConfig.output.library = webpackConfig.output.library
+      ? // @ts-ignore
+        webpackConfig.output.library
+      : 'INTERNAL_NEXT_APP'
+  }
+
   return webpackConfig
 }