Merge pull request #22 from bensmithett/update-deps

Upgrade dependencies

Author: bensmithett

.node-version

@@ -1 +1 @@
-14.5.0
+14.15.4

app/build.js

@@ -10,7 +10,7 @@ const path = require('path')
 const rimraf = require('rimraf')
 const chalk = require('chalk')
 const webpack = require('webpack')
-const ManifestPlugin = require('webpack-manifest-plugin')
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
 const rehypeSlugPlugin = require('rehype-slug')
 const packageJSON = require('../package.json')
 
@@ -26,15 +26,12 @@ const shared = {
       loader: 'babel-loader'
     },
 
-    // Transform static file imports into URL strings
-    staticFiles: (mode) => ({
+    // Transform static file imports into URL strings using Webpack 5 Asset Modules
+    // https://webpack.js.org/guides/asset-modules/
+    staticFiles: {
       test: /\.(png|jpe?g|gif|svg|woff2?|mp3|mp4|webm|webp)$/,
-      loader: 'file-loader',
-      options: {
-        name: '[path][name].[contenthash].[ext]',
-        publicPath: `${mode === 'production' ? packageJSON.tropical.siteURL : ''}/`
-      }
-    }),
+      type: 'asset/resource'
+    },
 
     // Transform MDX files into React components.
     mdx: {
@@ -52,10 +49,11 @@ const shared = {
     }
   },
 
-  output: {
+  output: (mode) => ({
     path: path.resolve(__dirname, '../output'),
-    publicPath: '/'
-  }
+    publicPath: `${mode === 'production' ? packageJSON.tropical.siteURL : ''}/`,
+    assetModuleFilename: 'assets/[name].[contenthash][ext]'
+  })
 }
 
 /*
@@ -70,16 +68,16 @@ const clientConfig = mode => {
     module: {
       rules: [
         shared.rules.js,
-        shared.rules.staticFiles(mode),
+        shared.rules.staticFiles,
         shared.rules.mdx
       ]
     },
     output: {
-      ...shared.output,
+      ...shared.output(mode),
       filename: mode === 'production' ? '[name].bundle.[contenthash].js' : '[name].bundle.js'
     },
     plugins: [
-      new ManifestPlugin({
+      new WebpackManifestPlugin({
         fileName: 'manifest.client.json'
       })
     ]
@@ -104,19 +102,19 @@ const prerenderConfig = (mode) => {
     module: {
       rules: [
         shared.rules.js,
-        shared.rules.staticFiles(mode),
+        shared.rules.staticFiles,
         shared.rules.mdx
       ]
     },
     output: {
-      ...shared.output,
+      ...shared.output(mode),
       filename: '[name].bundle.js',
       libraryExport: 'default',
       libraryTarget: 'commonjs2',
       library: 'prerender'
     },
     plugins: [
-      new ManifestPlugin({
+      new WebpackManifestPlugin({
         fileName: 'manifest.prerender.json'
       })
     ]
@@ -177,7 +175,7 @@ rimraf(path.resolve(__dirname, '../output/*'), err => {
       console.log(chalk.cyan('🏝  Clearing commonjs require cache...'))
       delete require.cache[require.resolve(prerenderModulePath)]
       console.log(chalk.cyan('🏝  Loading webpacked prerender module...'))
-      const prerender = require(prerenderModulePath)
+      const { prerender } = require(prerenderModulePath)
       console.log(chalk.cyan('🏝  Prerendering...'))
 
       try {

package.json

@@ -21,17 +21,16 @@
     "dayjs": "^1.8.31",
     "fela": "^11.1.2",
     "fela-dom": "^11.1.2",
-    "file-loader": "^6.0.0",
     "prism-react-renderer": "^1.1.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-fela": "^11.1.2",
     "react-helmet": "^6.0.0-beta.2",
     "rehype-slug": "^3.0.0",
     "rimraf": "^3.0.2",
     "serve": "^11.3.0",
-    "webpack": "^4.41.6",
-    "webpack-manifest-plugin": "^2.2.0"
+    "webpack": "^5.21.2",
+    "webpack-manifest-plugin": "^3.0.0"
   },
   "tropical": {
     "feedCollection": "posts",