Make both production and development builds available

In order to allow the consuming apps to leverage friendly CSS class names and React tooling (PropTypes, StrictMode, etc.) during development this commit adds development builds of CSS and JS files into the `dist` folder.

Author: mbohal

package.json

@@ -33,8 +33,10 @@
     "npm": ">=9"
   },
   "scripts": {
-    "build": "webpack --mode=production",
-    "copy": "cp \"src/docs/_assets/generated/react-ui.css\" dist & cp \"src/docs/_assets/generated/react-ui.js\" dist",
+    "build": "webpack --mode=production && webpack --mode=development",
+    "copy": "npm run copy:css && npm run copy:js",
+    "copy:css": "cp src/docs/_assets/generated/react-ui.css dist && cp src/docs/_assets/generated/react-ui.development.css dist",
+    "copy:js": "cp src/docs/_assets/generated/react-ui.js dist && cp src/docs/_assets/generated/react-ui.development.js dist",
     "eslint": "eslint --ext js,jsx src",
     "jest": "jest src --coverage",
     "lint": "npm run eslint && npm run markdownlint && npm run stylelint",

webpack.config.babel.js

@@ -65,11 +65,13 @@ module.exports = (env, argv) => ({
     ],
   },
   optimization: {
-    minimize: true,
+    minimize: argv.mode === 'production',
     minimizer: [new TerserPlugin()],
   },
   output: {
-    filename: '[name].js',
+    filename: argv.mode === 'production'
+      ? '[name].js'
+      : '[name].development.js',
     libraryTarget: 'umd',
     path: Path.join(__dirname, 'src/docs/_assets/generated/'),
   },
@@ -84,8 +86,12 @@ module.exports = (env, argv) => ({
   },
   plugins: [
     new MiniCssExtractPlugin({
-      chunkFilename: '[id].css',
-      filename: '[name].css',
+      chunkFilename: argv.mode === 'production'
+        ? '[id].css'
+        : '[id].development.css',
+      filename: argv.mode === 'production'
+        ? '[name].css'
+        : '[name].development.css',
       ignoreOrder: false, // Enable to remove warnings about conflicting order
     }),
     new StyleLintPlugin({