Merge pull request #390 from vhiairrassary/vhiairrassary/webpack5

Add support for Webpack 5 and drop previous versions

Author: cquiroz

manual/src/ornate/cookbook.md

@@ -287,7 +287,7 @@ webpackDevServerExtraArgs := Seq("--inline")
 `webpack` is then called with the following arguments:
 
 ~~~
---bail --config <configfile>
+--config <configfile>
 ~~~
 
 You can add extra params to the `webpack` call, for example, to increase debugging

sbt-scalajs-bundler/src/main/scala/scalajsbundler/PackageJson.scala

@@ -42,25 +42,18 @@ object PackageJson {
 
     val sourceMapLoaderVersion =
       NpmPackage(webpackVersion).major match {
-        case Some(1) | Some(2) => "0.1.5"
-        case Some(3)           => "0.2.1"
-        case Some(4)           => "0.2.3"
-        case Some(x)           => sys.error(s"Unsupported webpack major version $x")
-        case None              => sys.error("No webpack version defined")
-      }
-
-    val webpackPackages =
-      NpmPackage(webpackVersion).major match {
-        case Some(1) | Some(2) | Some(3) => Seq("webpack" -> webpackVersion)
-        case Some(4)                     => Seq("webpack" -> webpackVersion, "webpack-cli" -> webpackCliVersion)
-        case _                           => Seq.empty
+        case Some(5) => "2.0.0"
+        case Some(x) => sys.error(s"Unsupported webpack major version $x")
+        case None    => sys.error("No webpack version defined")
       }
 
     val devDependencies =
       npmDevDependencies ++ (
         if (currentConfiguration == Compile) npmManifestDependencies.compileDevDependencies
         else npmManifestDependencies.testDevDependencies
-      ) ++ webpackPackages ++ Seq(
+      ) ++ Seq(
+        "webpack" -> webpackVersion,
+        "webpack-cli" -> webpackCliVersion,
         "webpack-dev-server" -> webpackDevServerVersion,
         "concat-with-sourcemaps" -> "1.0.7", // Used by the reload workflow
         "source-map-loader" -> sourceMapLoaderVersion // Used by webpack when emitSourceMaps is enabled
@@ -77,7 +70,6 @@ object PackageJson {
 
     log.debug("Writing 'package.json'")
     IO.write(targetFile, packageJson.toJson)
-    ()
   }
 
   /**

sbt-scalajs-bundler/src/main/scala/scalajsbundler/Stats.scala

@@ -1,8 +1,6 @@
 
 package scalajsbundler
 
-import java.time.LocalDateTime
-
 import play.api.libs.json._
 import play.api.libs.functional.syntax._
 import sbt.Logger
@@ -15,7 +13,16 @@ import java.nio.file.Path
  */
 object Stats {
 
-  final case class Asset(name: String, size: Long, emitted: Option[Boolean], chunkNames: List[String])
+  final case class Asset(name: String, size: Long, emitted: Boolean, chunkNames: List[String]) {
+    def formattedSize: String = {
+      val oneKiB = 1024L
+      val oneMiB = oneKiB * oneKiB
+
+      if (size < oneKiB) s"$size bytes"
+      else if (size < oneMiB) f"${size / oneKiB.toFloat}%1.2f KiB"
+      else f"${size / oneMiB.toFloat}%1.2f MiB"
+    }
+  }
 
   object formatting {
 
@@ -43,20 +50,32 @@ object Stats {
 
   }
 
-  final case class WebpackStats(version: String, hash: String, time: Long, outputPath: Option[Path], errors: List[String], warnings: List[String], assets: List[Asset]) {
+  final case class WebpackError(moduleName: String, message: String, loc: String)
+
+  final case class WebpackWarning(moduleName: String, message: String)
+
+  final case class WebpackStats(
+    version: String,
+    hash: String,
+    time: Long,
+    outputPath: Option[Path],
+    errors: List[WebpackError],
+    warnings: List[WebpackWarning],
+    assets: List[Asset]
+  ) {
 
     /**
       * Prints to the log an output similar to what webpack pushes to stdout
       */
     def print(log: Logger): Unit = {
       import formatting._
       // Print base info
-      List(s"Version: $version", s"Hash: $hash", s"Time: ${time}ms", s"Path: ${outputPath.getOrElse("<default>")}", s"Built at ${LocalDateTime.now}").foreach(x => log.info(x))
+      List(s"Version: $version", s"Hash: $hash", s"Time: ${time}ms", s"Path: ${outputPath.getOrElse("<default>")}").foreach(x => log.info(x))
       log.info("")
       // Print the assets
       assets.map { a =>
-        val emitted = a.emitted.fold("<unknown>")(a => if (a) "[emitted]" else "")
-        AssetLine(Part(a.name), Part(a.size.toString), Part(emitted), Part(a.chunkNames.mkString("[", ",", "]")))
+        val emitted = if (a.emitted) "[emitted]" else ""
+        AssetLine(Part(a.name), Part(a.formattedSize), Part(emitted), Part(a.chunkNames.mkString("[", ",", "]")))
       }.foldLeft(List(AssetLine.Zero)) {
         case (lines, curr) =>
           val adj = lines.map(_.adjustPadding(curr))
@@ -91,17 +110,28 @@ object Stats {
   implicit val assetsReads: Reads[Asset] = (
     (JsPath \ "name").read[String] and
     (JsPath \ "size").read[Long] and
-    (JsPath \ "emitted").readNullable[Boolean] and
-    (JsPath \\ "chunkNames").read[List[String]]
+    (JsPath \ "emitted").read[Boolean] and
+    (JsPath \ "chunkNames").read[List[String]]
   )(Asset.apply _)
 
+  implicit val errorReads: Reads[WebpackError] = (
+    (JsPath \ "moduleName").read[String] and
+      (JsPath \ "message").read[String] and
+      (JsPath \ "loc").read[String]
+    )(WebpackError.apply _)
+
+  implicit val warningReads: Reads[WebpackWarning] = (
+    (JsPath \ "moduleName").read[String] and
+      (JsPath \ "message").read[String]
+    )(WebpackWarning.apply _)
+
   implicit val statsReads: Reads[WebpackStats] = (
     (JsPath \ "version").read[String] and
     (JsPath \ "hash").read[String] and
     (JsPath \ "time").read[Long] and
     (JsPath \ "outputPath").readNullable[String].map(x => x.map(new File(_).toPath)) and // It seems webpack 2 doesn't produce outputPath
-    (JsPath \ "errors").read[List[String]] and
-    (JsPath \ "warnings").read[List[String]] and
+    (JsPath \ "errors").read[List[WebpackError]] and
+    (JsPath \ "warnings").read[List[WebpackWarning]] and
     (JsPath \ "assets").read[List[Asset]]
   )(WebpackStats.apply _)
 

sbt-scalajs-bundler/src/main/scala/scalajsbundler/Webpack.scala

@@ -10,7 +10,7 @@ import Stats._
 import scala.util.{Failure, Success, Try}
 
 object Webpack {
-  // Represents webpack 4 modes
+  // Represents webpack 5 modes
   sealed trait WebpackMode {
     def mode: String
   }
@@ -61,95 +61,74 @@ object Webpack {
     webpackConfigFile: BundlerFile.WebpackConfig,
     libraryBundleName: Option[String],
     mode: WebpackMode,
+    devServerPort: Int,
     log: Logger
   ): Unit = {
+    val webpackConfigContent = generateConfigFile(emitSourceMaps, entry, webpackConfigFile, libraryBundleName, mode,
+      devServerPort)
+
     log.info("Writing scalajs.webpack.config.js")
-    // Build the output configuration, configured for library output
-    // if a library bundle name is provided
-    val output = libraryBundleName match {
-      case Some(bundleName) =>
-        JS.obj(
-          "path" -> JS.str(webpackConfigFile.targetDir.toAbsolutePath.toString),
-          "filename" -> JS.str(BundlerFile.Library.fileName("[name]")),
-          "library" -> JS.str(bundleName),
-          "libraryTarget" -> JS.str("var")
-        )
-      case None =>
-        JS.obj(
-          "path" -> JS.str(webpackConfigFile.targetDir.toAbsolutePath.toString),
-          "filename" -> JS.str(BundlerFile.ApplicationBundle.fileName("[name]"))
-        )
-    }
+    IO.write(webpackConfigFile.file, webpackConfigContent.show)
+  }
 
-    // Build the file itself
-    val webpackConfigContent =
-      JS.ref("module").dot("exports").assign(JS.obj(Seq(
-        "entry" -> JS.obj(
-          entry.project -> JS.arr(JS.str(entry.file.absolutePath))
-        ),
-        "output" -> output
-      ) ++ (
-        if (emitSourceMaps) {
-          val webpackNpmPackage = NpmPackage.getForModule(webpackConfigFile.targetDir.toFile, "webpack")
-          webpackNpmPackage.flatMap(_.major) match {
-            case Some(1) =>
-              Seq(
-                "devtool" -> JS.str("source-map"),
-                "module" -> JS.obj(
-                  "preLoaders" -> JS.arr(
-                    JS.obj(
-                      "test" -> JS.regex("\\.js$"),
-                      "loader" -> JS.str("source-map-loader")
-                    )
-                  )
-                )
-              )
-            case Some(2) =>
-              Seq(
-                "devtool" -> JS.str("source-map"),
-                "module" -> JS.obj(
-                  "rules" -> JS.arr(
-                    JS.obj(
-                      "test" -> JS.regex("\\.js$"),
-                      "enforce" -> JS.str("pre"),
-                      "loader" -> JS.str("source-map-loader")
-                    )
-                  )
-                )
-              )
-            case Some(3) =>
-              Seq(
-                "devtool" -> JS.str("source-map"),
-                "module" -> JS.obj(
-                  "rules" -> JS.arr(
-                    JS.obj(
-                      "test" -> JS.regex("\\.js$"),
-                      "enforce" -> JS.str("pre"),
-                      "use" -> JS.arr(JS.str("source-map-loader"))
-                    )
-                  )
-                )
-              )
-            case Some(4) =>
-              Seq(
-                "mode" -> JS.str(mode.mode),
-                "devtool" -> JS.str("source-map"),
-                "module" -> JS.obj(
-                  "rules" -> JS.arr(
-                    JS.obj(
-                      "test" -> JS.regex("\\.js$"),
-                      "enforce" -> JS.str("pre"),
-                      "use" -> JS.arr(JS.str("source-map-loader"))
-                    )
+  private def generateConfigFile(
+    emitSourceMaps: Boolean,
+    entry: BundlerFile.WebpackInput,
+    webpackConfigFile: BundlerFile.WebpackConfig,
+    libraryBundleName: Option[String],
+    mode: WebpackMode,
+    devServerPort: Int
+  ): JS = {
+    val webpackNpmPackage = NpmPackage.getForModule(webpackConfigFile.targetDir.toFile, "webpack")
+    webpackNpmPackage.flatMap(_.major) match {
+      case Some(5) =>
+        // Build the output configuration, configured for library output
+        // if a library bundle name is provided
+        val output = libraryBundleName match {
+          case Some(bundleName) =>
+            JS.obj(
+              "path" -> JS.str(webpackConfigFile.targetDir.toAbsolutePath.toString),
+              "filename" -> JS.str(BundlerFile.Library.fileName("[name]")),
+              "library" -> JS.str(bundleName),
+              "libraryTarget" -> JS.str("var")
+            )
+          case None =>
+            JS.obj(
+              "path" -> JS.str(webpackConfigFile.targetDir.toAbsolutePath.toString),
+              "filename" -> JS.str(BundlerFile.ApplicationBundle.fileName("[name]"))
+            )
+        }
+
+        JS.ref("module").dot("exports").assign(JS.obj(Seq(
+          "entry" -> JS.obj(
+            entry.project -> JS.arr(JS.str(entry.file.absolutePath))
+          ),
+          "output" -> output,
+          "mode" -> JS.str(mode.mode),
+          "devServer" -> JS.obj("port" -> JS.int(devServerPort)),
+        ) ++ (
+          if (emitSourceMaps) {
+            Seq(
+              "devtool" -> JS.str("source-map"),
+              "module" -> JS.obj(
+                "rules" -> JS.arr(
+                  JS.obj(
+                    "test" -> JS.regex("\\.js$"),
+                    "enforce" -> JS.str("pre"),
+                    "use" -> JS.arr(JS.str("source-map-loader"))
                   )
                 )
               )
-            case Some(x) => sys.error(s"Unsupported webpack major version $x")
-            case None => sys.error("No webpack version defined")
-          }
-        } else Nil
-        ): _*))
-    IO.write(webpackConfigFile.file, webpackConfigContent.show)
+            )
+          } else Nil
+          ): _*))
+
+      case Some(x) =>
+        sys.error(s"Unsupported webpack major version $x")
+
+      case None =>
+        sys.error("No webpack version defined")
+    }
   }
 
   /**
@@ -162,7 +141,8 @@ object Webpack {
     * @param entry Scala.js application to bundle
     * @param targetDir Target directory (and working directory for Nodejs)
     * @param extraArgs Extra arguments passed to webpack
-    * @param mode Mode for webpack 4
+    * @param mode Mode for webpack 5
+    * @param devServerPort Port used by webpack-dev-server
     * @param log Logger
     * @return The generated bundles
     */
@@ -176,9 +156,10 @@ object Webpack {
      extraArgs: Seq[String],
      nodeArgs: Seq[String],
      mode: WebpackMode,
+     devServerPort: Int,
      log: Logger
   ): BundlerFile.ApplicationBundle = {
-    writeConfigFile(emitSourceMaps, entry, generatedWebpackConfigFile, None, mode, log)
+    writeConfigFile(emitSourceMaps, entry, generatedWebpackConfigFile, None, mode, devServerPort, log)
 
     val configFile = customWebpackConfigFile
       .map(Webpack.copyCustomWebpackConfigFiles(targetDir, webpackResources))
@@ -206,7 +187,7 @@ object Webpack {
     * @param entryPointFile The entrypoint file to bundle dependencies for
     * @param libraryModuleName The library module name to assign the webpack bundle to
     * @param extraArgs Extra arguments passed to webpack
-    * @param mode Mode for webpack 4
+    * @param mode Mode for webpack 5
     * @param log Logger
     * @return The generated bundle
     */
@@ -220,6 +201,7 @@ object Webpack {
     extraArgs: Seq[String],
     nodeArgs: Seq[String],
     mode: WebpackMode,
+    devServerPort: Int,
     log: Logger
   ): BundlerFile.Library = {
     writeConfigFile(
@@ -228,6 +210,7 @@ object Webpack {
       generatedWebpackConfigFile,
       Some(libraryModuleName),
       mode,
+      devServerPort,
       log
     )
 
@@ -260,8 +243,16 @@ object Webpack {
           if (p.warnings.nonEmpty || p.errors.nonEmpty) {
             logger.info("")
             // Filtering is a workaround for #111
-            p.warnings.filterNot(_.contains("https://raw.githubusercontent.com")).foreach(x => logger.warn(x))
-            p.errors.foreach(x => logger.error(x))
+            p.warnings.filterNot(_.message.contains("https://raw.githubusercontent.com")).foreach { warning =>
+              logger.warn(s"WARNING in ${warning.moduleName}")
+              logger.warn(warning.message)
+              logger.warn("\n")
+            }
+            p.errors.foreach { error =>
+              logger.error(s"ERROR in ${error.moduleName} ${error.loc}")
+              logger.error(error.message)
+              logger.error("\n")
+            }
           }
           Some(p)
       }
@@ -290,7 +281,7 @@ object Webpack {
     */
   def run(nodeArgs: String*)(args: String*)(workingDir: File, log: Logger): Option[WebpackStats] = {
     val webpackBin = workingDir / "node_modules" / "webpack" / "bin" / "webpack"
-    val params = nodeArgs ++ Seq(webpackBin.absolutePath, "--bail", "--profile", "--json") ++ args
+    val params = nodeArgs ++ Seq(webpackBin.absolutePath, "--profile", "--json") ++ args
     val cmd = "node" +: params
     Commands.run(cmd, workingDir, log, jsonOutput(cmd, log)).fold(sys.error, _.flatten)
   }