some comments

webpack.config.js

@@ -6,11 +6,14 @@ function relpath(fp) {
 }
 
 module.exports = {
-    mode: 'production',
+    // note: production disables the in-memory cache
+    mode: 'development', // 'production',
     entry: {
         index: relpath('src/index.js'),
     },
+    // enable source mapping (disable for much smaller files)
     devtool: 'inline-source-map',
+    // auto-generate index.html file with webpack bundles
     plugins: [
         new HtmlWebpackPlugin({
             title: 'Example Webapp',
@@ -26,8 +29,9 @@ module.exports = {
         static: relpath('dist'),
     },
     optimization: {
-        moduleIds: 'deterministic',
         runtimeChunk: 'single',
+        // enable caching with vendors in a seperate chunk
+        moduleIds: 'deterministic',
         splitChunks: {
             cacheGroups: {
                 vendor: {
@@ -40,23 +44,26 @@ module.exports = {
     },
     performance: {
         // hides the performance warnings for now
-        // TODO: proper code splitting
+        // these are especially apparent with source maps enabled
         hints: false,
     },
     module: {
         rules: [
             // sass support with `import './styles.scss'`
             {
+                include: relpath('src'),
                 test: /\.s[ac]ss$/i,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
             },
             // css support with `import './styles.css'`
             {
+                include: relpath('src'),
                 test: /\.css$/i,
                 use: ['style-loader', 'css-loader'],
             },
             // image support with `import Image from './image.png'`
             {
+                include: relpath('src'),
                 test: /\.(png|svg|jpg|jpeg|gif)$/i,
                 type: 'asset/resource',
             },