DEP Upgrade frontend build stack (#697)

.nvmrc

@@ -1 +1 @@
-10
+18

babel.config.json

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

package.json

@@ -1,9 +1,8 @@
 {
   "name": "silverstripe-blog",
-  "version": "3.0.0",
   "description": "A fresh take on blogging in Silverstripe set out to tackle the issue of a cluttered Site Tree",
   "scripts": {
-    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -28,11 +27,16 @@
   },
   "homepage": "https://github.com/silverstripe/silverstripe-blog#readme",
   "dependencies": {},
-  "peerDependencies": {
-    "jquery": "^3"
-  },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.5",
-    "@silverstripe/webpack-config": "^1.3"
-  }
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
+  },
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

tests/behat/features/blog.feature

@@ -47,7 +47,7 @@ Feature: Create a blog
     And I press the "Log in as someone else" button
 
   Scenario: Create a blog post
-  
+
     Given I am logged in as a member of "EDITOR" group
     # Create a new blog post called "New Post"
     When I go to "/admin/pages"
@@ -65,8 +65,8 @@ Feature: Create a blog
 
     # Add categories and tags
     And I click the "Post Options" CMS tab
-    And I add "My Category" to the "Categories" tag field
-    And I add "My Tag" to the "Tags" tag field
+    And I add "My Category" to the "#Form_EditForm_Categories_Holder" tag field
+    And I add "My Tag" to the "#Form_EditForm_Tags_Holder" tag field
 
     # Publish the blog post and logout
     And I press the "Publish" button

webpack.config.js

@@ -1,55 +1,31 @@
 const Path = require('path');
-const webpack = require('webpack');
-// Import the core config
-const webpackConfig = require('@silverstripe/webpack-config');
-const {
-    resolveJS,
-    externalJS,
-    moduleJS,
-    pluginJS,
-    moduleCSS,
-    pluginCSS,
-} = webpackConfig;
+const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
 
 const ENV = process.env.NODE_ENV;
 const PATHS = {
     ROOT: Path.resolve(),
-    MODULES: 'node_modules',
-    FILES_PATH: '../',
-    THIRDPARTY: 'thirdparty',
     SRC: Path.resolve('client/src'),
     DIST: Path.resolve('client/dist'),
 };
 
 const config = [
-    {
-        name: 'bundle',
-        entry: {
-            main: `${PATHS.SRC}/main.js`
-        },
-        output: {
-            path: PATHS.DIST,
-            filename: 'js/[name].bundle.js',
-        },
-        devtool: (ENV !== 'production') ? 'source-map' : '',
-        resolve: resolveJS(ENV, PATHS),
-        externals: externalJS(ENV, PATHS),
-        module: moduleJS(ENV, PATHS),
-        plugins: pluginJS(ENV, PATHS),
-    },
-    {
-        name: 'bundle',
-        entry: {
-            main: `${PATHS.SRC}/main.scss`
-        },
-        output: {
-            path: PATHS.DIST,
-            filename: 'styles/[name].css'
-        },
-        devtool: (ENV !== 'production') ? 'source-map' : '',
-        module: moduleCSS(ENV, PATHS),
-        plugins: pluginCSS(ENV, PATHS),
-    },
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/blog')
+    .setEntry({
+      main: `${PATHS.SRC}/main.js`
+    })
+    .mergeConfig({
+      output: {
+        filename: 'js/[name].bundle.js',
+      },
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
+      main: `${PATHS.SRC}/main.scss`
+    })
+    .getConfig(),
 ];
 
 module.exports = config;