import path from "path" ; import HtmlWebpackPlugin from "html-webpack-plugin" ; import type { Configuration as WebpackConfiguration } from "webpack" ; import type { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server" ; import webpack from "webpack" ; import { getGithubUserContribution } from "@snk/github-user-contribution" ; const demos = require ( "./demo.json" ) ; const webpackDevServerConfiguration = { open : { target : demos [ 1 ] + ".html" } , onAfterSetupMiddleware : ( { app } ) => { app . get ( "/api/github-user-contribution/:userName" , async ( req , res ) => { const userName = req . params . userName ; res . send ( await getGithubUserContribution ( userName ) ) ; } ) ; } } ; const webpackConfiguration = { mode : "development" , entry : Object . fromEntries ( demos . map ( ( demo ) => [ demo , `./demo.${ demo }` ] ) ) , target : [ "web" , "es2019" ] , resolve : { extensions : [ ".ts" , ".js" ] } , output : { path : path . join ( __dirname , "dist" ) , filename : "[contenthash].js" } , module : { rules : [ { exclude : /node_modules/ , test : /\.ts$/ , loader : "ts-loader" , options : { transpileOnly : true , compilerOptions : { lib : [ "dom" , "es2020" ] , target : "es2019" } } } , ] } , plugins : [ ... demos . map ( ( demo ) => new HtmlWebpackPlugin ( { title : "snk - " + demo , filename : `${ demo }.html` , chunks : [ demo ] } ) ) , new HtmlWebpackPlugin ( { title : "snk - " + demos [ 0 ] , filename : `index.html` , chunks : [ demos [ 0 ] ] } ) , new webpack . EnvironmentPlugin ( { GITHUB_USER_CONTRIBUTION_API_ENDPOINT : process . env . GITHUB_USER_CONTRIBUTION_API_ENDPOINT ?? "/api/github-user-contribution/" } ) , ] , devtool : false } ; export default { ... webpackConfiguration , devServer : webpackDevServerConfiguration } ;