Upgrade to webpack 5!

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 0.30.0
+
+* Upgrade to webpack 5!
+* Upgrade all (most) dependencies
+* Improve error handling, log unexpected errors when serving bundles in development instead of hanging
+* Remove the graceful termination fix introduced in 0.21.1 as it does not appear to work in node@16
+
 # 0.22.0
 
 * Add support for optional chaining and nullish coalescing operator. This is supported by babel out of the box, but since jetpack is still on webpack 4 (it's faster?), we need to include the right plugins explicitly for this to work.

lib/browsers.js

@@ -1,4 +1,4 @@
-const chalk = require('chalk')
+const chalk = require('picocolors')
 const browserslist = require('browserslist')
 const browserslistUseragentRegexp = require('browserslist-useragent-regexp')
 

lib/build.js

@@ -2,7 +2,7 @@ const fs = require('fs-extra')
 const path = require('path')
 const webpack = require('webpack')
 const handlebars = require('handlebars')
-const chalk = require('chalk')
+const chalk = require('picocolors')
 const wpConf = require('./webpack.config')
 const printConfig = require('./printConfig')
 const { recomputeAssets } = require('./options')

lib/dev.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const chalk = require('chalk')
+const chalk = require('picocolors')
 const webpackPkg = require('webpack/package.json')
 const wpConf = require('./webpack.config')
 const printConfig = require('./printConfig')

lib/logger.js

@@ -1,4 +1,4 @@
-const chalk = require('chalk')
+const chalk = require('picocolors')
 
 module.exports = function (shouldLogVerbose, quiet, prefix = 'jetpack ›') {
   return { info, verbose, warn, error }

lib/reporter.js

@@ -1,24 +1,24 @@
 const path = require('path')
-const chalk = require('chalk')
+const chalk = require('picocolors')
 
 module.exports = function reporter (compiler, log, options = {}) {
   let builds = 0
 
   function onError (errors) {
     const sfx = errors.length > 1 ? 's' : ''
-    log.error(`Failed to compile! Found ${chalk.red.bold(errors.length)} error${sfx}:`)
+    log.error(`Failed to compile! Found ${chalk.bold(chalk.red(errors.length))} error${sfx}:`)
     errors.forEach(x => console.log('\n  ' + x.replace(/(\r?\n)/g, '$1  ') + '\n'))
   }
 
   function onWarning (warnings) {
     const sfx = warnings.length > 1 ? 's' : ''
-    log.warn(`Compiled with ${chalk.yellow.bold(warnings.length)} warning${sfx}:`)
+    log.warn(`Compiled with ${chalk.bold(chalk.yellow(warnings.length))} warning${sfx}:`)
     warnings.forEach(x => console.log('\n  ' + x.replace(/(\r?\n)/g, '$1  ') + '\n'))
   }
 
   compiler.hooks.invalid.tap('jetpack', file => {
     file = path.relative(options.dir, file)
-    log.info(`File changed: ${chalk.white.bold(file)}`)
+    log.info(`File changed: ${chalk.bold(chalk.white(file))}`)
   })
 
   compiler.hooks.failed.tap('jetpack', (error) => {

lib/serve.js

@@ -53,14 +53,13 @@ function createProxy (target) {
           console.log(msg)
           res.writeHead(502, { 'Content-Type': 'application/json' })
           res.end(JSON.stringify({ error: msg }))
+        } else {
+          console.log(err)
+          res.writeHead(502, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: err.stack }))
         }
       })
 
-      // req socket closed - terminate proxyReq
-      req.on('close', () => {
-        proxyReq.destroy()
-      })
-
       req.pipe(proxyReq)
     } catch (err) {
       next(err)

lib/webpack.config.js

@@ -49,6 +49,9 @@ async function createConfig (options) {
     },
     infrastructureLogging: {
       level: 'none'
+    },
+    experiments: {
+      backCompat: false
     }
   }
 

lib/webpack.css.js

@@ -1,6 +1,5 @@
 const postcssrc = require('postcss-load-config')
 const browsers = require('./browsers')
-const MiniCssExtractPlugin = () => require('mini-css-extract-plugin')
 
 module.exports = async (config, options) => {
   // allow overriding postcss config
@@ -15,7 +14,7 @@ module.exports = async (config, options) => {
     test: /\.css$/,
     use: [
       {
-        loader: options.production ? MiniCssExtractPlugin().loader : require.resolve('style-loader')
+        loader: options.production ? require('mini-css-extract-plugin').loader : require.resolve('style-loader')
       },
       {
         loader: require.resolve('css-loader'),
@@ -58,13 +57,14 @@ module.exports = async (config, options) => {
   })
 
   if (options.production) {
-    config.plugins.push(new (MiniCssExtractPlugin())({
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+    config.plugins.push(new MiniCssExtractPlugin({
       filename: '[name].[contenthash:8].css',
       chunkFilename: '[name].[contenthash:8].chunk.css'
     }))
     if (options.minify) {
-      const OptimizeCss = require('optimize-css-assets-webpack-plugin')
-      config.plugins.push(new OptimizeCss())
+      const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+      config.optimization.minimizer.push(new CssMinimizerPlugin())
     }
   }
 }

lib/webpack.js.js

@@ -76,9 +76,7 @@ module.exports = (config, options) => {
     if (options.minify) {
       const Terser = require('terser-webpack-plugin')
       config.plugins.push(new Terser({
-        cache: true,
         parallel: true,
-        sourceMap: !!options.sourceMaps,
         terserOptions: {
           mangle: true,
           compress: true,