new(examples-app): add Webpack setup

examples-app/README.md

@@ -1,3 +1,5 @@
 # Examples app
 
 This small app run the examples in DayPicker and can be used to test the library.
+
+The primary development and build tool is Vite, but there's also a Webpack setup to test how the library would work using Webpack.

examples-app/package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "webpack:dev": "webpack serve --mode development",
+    "webpack:build": "tsc -b && webpack --mode production"
   },
   "dependencies": {
     "react": "^19.0.0",
@@ -19,7 +21,18 @@
     "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.10.0",
+    "style-loader": "^3.3.4",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.2",
+    "html-webpack-plugin": "^5.6.0",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",

examples-app/webpack.config.js

@@ -0,0 +1,84 @@
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
+  entry: "./src/main.tsx",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].[contenthash].js",
+    clean: true
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js", ".jsx"]
+  },
+  optimization: {
+    usedExports: true,
+    minimize: true,
+    splitChunks: {
+      chunks: "all",
+      minSize: 20000,
+      minChunks: 1,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          chunks: "all"
+        }
+      }
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              ["@babel/preset-react", { runtime: "automatic" }],
+              "@babel/preset-typescript"
+            ]
+          }
+        }
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[name]__[local]--[hash:base64:5]"
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./index.html"
+    })
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "public")
+    },
+    hot: true,
+    port: 3000,
+    open: true
+  }
+};