chore(example): build for production

This prevents unneeded hick-ups during loading.

example/package.json

@@ -2,8 +2,8 @@
   "name": "example",
   "private": true,
   "scripts": {
-    "build": "webpack",
-    "start": "webpack serve --open"
+    "build": "cross-env NODE_ENV=production webpack",
+    "start": "cross-env NODE_ENV=development webpack serve --open"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -15,6 +15,7 @@
     "file-drops": "^0.5.0",
     "file-open": "^0.1.1",
     "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "raw-loader": "^4.0.2",
     "style-loader": "^4.0.0",
     "webpack": "^5.94.0",

example/webpack.config.cjs

@@ -2,10 +2,11 @@
 
 const path = require('path');
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  mode: 'development',
   entry: {
     app: path.resolve(__dirname, './src/app.js'),
   },
@@ -26,15 +27,24 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: [ 'style-loader', 'css-loader' ],
+        use: [
+          process.env.NODE_ENV !== "production"
+            ? "style-loader"
+            : MiniCssExtractPlugin.loader,
+          'css-loader'
+        ],
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html',
     })
-  ],
+  ].concat(
+    process.env.NODE_ENV !== "production"
+      ? []
+      : new MiniCssExtractPlugin()
+  ),
   devtool: 'eval-source-map',
   devServer: {
     hot: false,