webpack serve

makefile

@@ -1,5 +1,8 @@
 build:
-	npx webpack --mode production
+	npx webpack
+
+serve:
+	npx webpack serve --no-open
 
 dev-server:
 	python -m http.server --directory dist/ 8700 

package.json

@@ -16,6 +16,7 @@
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
         "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1"
+        "webpack-cli": "^5.0.1",
+        "webpack-dev-server": "^4.11.1"
     }
 }

webpack.config.js

@@ -1,21 +1,38 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+function relpath(fp) {
+    return path.resolve(__dirname, ...fp.split('/'));
+}
+
 module.exports = {
+    mode: 'production',
     entry: {
-        index: path.resolve(__dirname, 'src', 'index.js'),
+        index: relpath('src/index.js'),
     },
     devtool: 'inline-source-map',
     plugins: [
         new HtmlWebpackPlugin({
             title: 'Example Webapp',
-            template: path.resolve(__dirname, 'src', 'index.html'),
+            template: relpath('src/index.html'),
         }),
     ],
     output: {
         clean: true,
         filename: '[name].bundle.js',
-        path: path.resolve(__dirname, 'dist'),
+        path: relpath('dist'),
+    },
+    devServer: {
+        static: relpath('dist'),
+    },
+    optimization: {
+        // fixes problems when bundling more than one entry
+        runtimeChunk: 'single',
+    },
+    performance: {
+        // hides the performance warnings for now
+        // TODO: proper code splitting
+        hints: false,
     },
     module: {
         rules: [