transpile with babel

notes.md

@@ -76,6 +76,10 @@ with
 
 ## Notes
 
+when specifying the css minimizer in the config, this causes us to no longer be
+using the defaults (which includes js minification for production). This means
+we have to tell webpack to minimise the js explicitly (or use to also  defaults with '...')
+
 Asset management:
 
 >= webpack 5.0 - use asset modules (replaces raw-loader, url-loader, file-loader)

package.json

@@ -11,6 +11,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.0.1",
     "cssnano-webpack-plugin": "^1.0.3",

webpack.config.js

@@ -31,6 +31,16 @@ module.exports = env => {
 		],
 		module: {
 			rules: [
+				{
+					test: /\.js?/,
+					exclude: /node_modules/,
+					use: {
+						loader: 'babel-loader',
+						options: {
+							presets: ['@babel/preset-env']
+						}
+					}
+				},
 				{
 					test: /\.inline\.css$/i,
 					include: path.resolve(__dirname, 'src/css'),
@@ -77,7 +87,8 @@ module.exports = env => {
 			minimizer: [
 				new CssnanoPlugin({
 					sourceMap: true,
-				})
+				}),
+				'...',  // access defaults (defaults are overridden when specifying minimizer: array)
 			],
 		},
 	}