DEP Upgrade frontend build stack (#74)

.nvmrc

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

babel.config.json

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

client/dist/styles/segment-field.css

@@ -1 +1 @@
-.field.segment .preview-holder .preview{border-left:0}.field.segment .edit-holder{display:none}.field.segment .edit-holder .update,.field.segment .preview-holder .edit{margin-left:10px}
+.field.segment .preview-holder .preview{border-left:0}.field.segment .edit-holder{display:none}.field.segment .preview-holder .edit,.field.segment .edit-holder .update{margin-left:10px}

package.json

@@ -1,6 +1,6 @@
 {
   "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",
@@ -10,14 +10,21 @@
     "lint-sass": "sass-lint client/src",
     "test": "true"
   },
-  "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.6",
-    "@silverstripe/webpack-config": "^1.3"
+  "engines": {
+    "node": "^18.x"
   },
   "dependencies": {
-    "jquery": "^3.5.0"
   },
-  "engines": {
-    "node": "^10.x"
-  }
+  "devDependencies": {
+    "@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"
+  ]
 }

webpack.config.js

@@ -1,55 +1,26 @@
 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 = {
-  MODULES: 'node_modules',
-  FILES_PATH: '../',
   ROOT: Path.resolve(),
   SRC: Path.resolve('client/src'),
   DIST: Path.resolve('client/dist'),
-  THIRDPARTY: Path.resolve('thirdparty'),
 };
 
 const config = [
-  {
-    name: 'js',
-    entry: {
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/segment-field')
+    .setEntry({
       'segment-field': `${PATHS.SRC}/bundles/segment-field.js`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'js/[name].js',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    resolve: resolveJS(ENV, PATHS),
-    externals: externalJS(ENV, PATHS),
-    module: moduleJS(ENV, PATHS),
-    plugins: pluginJS(ENV, PATHS),
-  },
-  {
-    name: 'css',
-    entry: {
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
       'segment-field': `${PATHS.SRC}/styles/segment-field.scss`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'styles/[name].css'
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    module: moduleCSS(ENV, PATHS),
-    plugins: pluginCSS(ENV, PATHS),
-  },
+    })
+    .getConfig(),
 ];
 
 module.exports = config;