Update for nodejs@14.15.1 and webpack@5.9

README.md

@@ -52,8 +52,8 @@ mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_
 
 ### Assets
 
-* `Node`: 4.3.1
-* `npm`: 1.4
+* `Node`: 14.15.1
+* `npm`: 6.14.9
 
 It may inadvertently work in versions other than the above, but it won't have been
 thoroughly tested (see [.travis.yml][.travis.yml] for the defined build matrix).

installer/templates/new/.babelrc

@@ -1,6 +1,5 @@
 {
   "presets": [
-    "es2015",
-    "react"
+    "@babel/preset-react"
   ]
 }

installer/templates/new/package.json

@@ -4,52 +4,52 @@
   "description": "Dashboard Application",
   "main": "index.js",
   "engines": {
-    "node": "4.3.1",
-    "npm": "3.10.9"
+    "node": "14.15.1",
+    "npm": "6.14.9"
   },
   "scripts": {
-    "build": "./node_modules/.bin/webpack --config webpack.config.js",
-    "start": "./node_modules/.bin/webpack-dev-server --progress --colors",
+    "build": "./node_modules/.bin/webpack",
+    "start": "./node_modules/.bin/webpack serve --progress",
     "heroku-postbuild": "npm run build"
   },
   "keywords": [
     "webpack"
   ],
   "author": "",
   "license": "MIT",
-  "devDependencies": {
-    "webpack-dev-server": "3.1.11",
-    "webpack-cli": "3.2.1"
-  },
   "dependencies": {
     "kitto": "file:<%= npm_kitto_dep %>",
-    "webpack": "^1.12.13",
+    "webpack": "^5.9.0",
     "webpack-merge": "^0.15.0",
-    "compression-webpack-plugin": "0.3.1",
-    "babel-core": "^6.5.2",
-    "babel-loader": "^6.2.2",
+    "compression-webpack-plugin": "7.0.0",
+    "@babel/core": "^7.12.9",
+    "babel-loader": "^8.2.2",
     "babel-preset-es2015": "6.18.0",
-    "babel-preset-react": "^6.5.0",
+    "@babel/preset-react": "^7.12.7",
     "babel-preset-react-hmre": "^1.1.0",
-    "sass-loader": "^3.2.0",
-    "url-loader": "^0.5.5",
-    "file-loader": "^0.8.1",
+    "sass-loader": "^10.1.0",
+    "url-loader": "^4.1.1",
+    "file-loader": "^6.2.0",
     "style-loader": "^0.13.0",
     "script-loader": "^0.7.0",
     "imports-loader": "0.6.5",
     "expose-loader": "0.7.1",
     "css-loader": "^0.9.1",
-    "node-sass": "^3.4.2",
+    "node-sass": "^5.0.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "glob": "7.1.0",
-    "font-awesome": "^4.3.0",
+    "font-awesome": "^4.7.0",
     "d3": "3.5.17",
     "gridster": "0.5.6",
     "imports": "^1.0.0",
     "rickshaw": "1.6.0",
     "jquery": "^3.0.0",
     "jquery-knob": "1.2.11",
     "fscreen": "^1.0.2"
+  },
+  "devDependencies": {
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0"
   }
 }

installer/templates/new/webpack.config.js

@@ -21,8 +21,11 @@ const common = {
     widgets: PATHS.widgets
   },
   resolve: {
-    extensions: ['', '.js', '.jsx', 'css', 'scss'],
-    modulesDirectories: ['node_modules', PATHS.gridster],
+    extensions: ['.js', '.jsx', 'css', 'scss'],
+    modules: [
+      'node_modules',
+      PATHS.gridster
+    ],
     alias: {
       d3: PATHS.d3
     }
@@ -33,29 +36,62 @@ const common = {
     filename: '[name].js'
   },
   module: {
-    loaders: [
-      { test: /\.css$/, loaders: ['style', 'css'] },
-      { test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
-      { test: /\.jsx?$/, loaders: ['babel?cacheDirectory'] },
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader'
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.jsx?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true
+            }
+          }
+        ]
+      },
       {
         test: /\.(svg|png|jpe?g|gif)(\?\S*)?$/,
-        loader: 'url?limit=1000&name=images/[name].[ext]'
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/[name].[ext]'
+            }
+          }
+        ]
       },
       {
         test: /\.(eot|woff|woff2|ttf)(\?\S*)?$/,
-        loader: 'url?limit=1000&name=fonts/[name].[ext]'
+        loader: 'file-loader',
+        options: {
+          outputPath: 'fonts'
+        }
       },
       {
         test: require.resolve('jquery-knob'),
-        loader: "imports?require=>false,define=>false,this=>window"
+        use: 'imports-loader?require=>false,define=>false,this=>window'
       },
       {
         test: PATHS.d3,
-        loader: "script"
+        use: ['script-loader']
       },
       {
         test: require.resolve('rickshaw'),
-        loader: "script"
+        use: ['script-loader']
       }
     ]
   }
@@ -72,6 +108,7 @@ if (TARGET === 'start' || !TARGET) {
       hot: true,
       inline: true,
       progress: true,
+      publicPath: '/assets/',
 
       // display only errors to reduce the amount of output
       stats: 'errors-only',
@@ -101,10 +138,12 @@ if (TARGET === 'build') {
         }
       }),
       new CompressionPlugin({
-        asset: '[path].gz[query]',
+        filename: '[path].gz[query]',
         algorithm: 'gzip',
         test: /\.js$|\.html$/,
-        verbose: true
+        compressionOptions: {
+          verbose: true
+        }
       })
     ]
   });

lib/mix/tasks/kitto.server.ex

@@ -2,8 +2,8 @@ defmodule Mix.Tasks.Kitto.Server do
   use Mix.Task
   require Logger
 
-  @watchers webpack: [bin: "./node_modules/.bin/webpack-dev-server",
-                      opts: ["--stdin", "--progress"]]
+  @watchers webpack: [bin: "./node_modules/.bin/webpack",
+                      opts: ["serve", "--stdin", "--progress"]]
 
   @shortdoc "Starts applications and their servers"