{"id":15387037,"url":"https://github.com/gkjohnson/index-html-webpack-example","last_synced_at":"2025-11-13T22:53:13.251Z","repository":{"id":66338453,"uuid":"99872561","full_name":"gkjohnson/index-html-webpack-example","owner":"gkjohnson","description":"Example config for building a full index.html client app with Webpack","archived":false,"fork":false,"pushed_at":"2017-10-08T19:34:59.000Z","size":558,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-09T12:05:01.984Z","etag":null,"topics":["bundle","example","html","index","javascript","native-javascript","simple","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gkjohnson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-10T02:32:05.000Z","updated_at":"2025-04-19T22:21:12.000Z","dependencies_parsed_at":"2023-02-24T23:00:28.288Z","dependency_job_id":null,"html_url":"https://github.com/gkjohnson/index-html-webpack-example","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"73e47125820164ebd90cec75be58ff72fc7bac4c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gkjohnson/index-html-webpack-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkjohnson%2Findex-html-webpack-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkjohnson%2Findex-html-webpack-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkjohnson%2Findex-html-webpack-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkjohnson%2Findex-html-webpack-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gkjohnson","download_url":"https://codeload.github.com/gkjohnson/index-html-webpack-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gkjohnson%2Findex-html-webpack-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284304462,"owners_count":26982161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-13T02:00:06.582Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bundle","example","html","index","javascript","native-javascript","simple","webpack"],"created_at":"2024-10-01T14:51:33.702Z","updated_at":"2025-11-13T22:53:13.230Z","avatar_url":"https://github.com/gkjohnson.png","language":"HTML","readme":"# index-html-webpack-example\n\nExample project showing how to use webpack to bundle a vanilla `index.html` webpage.\n\n## The Problem\n\nWebpack is built for preprocessing, transpiling, scoping, and bundling projects into a single javascript file to be included in a webpage, but what if you have a basic client application using only native functionality? How can webpack be used to build a single javascript bundle along side the `index.html` file that imports it for a deployment?\n\n## The Solution\n\nThe [webpack config file](webpack.config.js) used here will process a full application's index.html file into a [.js file](dist/index.bundle.js) and an [.html file](dist/index.bundle.html) that imports it using `babel-loader`, `script-loader`, and `wc-loader`. The build will inject the index `\u003chead\u003e` and `\u003cbody\u003e` content at run time once the script runs.\n\n## Demo\nThe config can convert a basic [index.html](index.html) file into a fully bundled page consisting of [two files](https://gkjohnson.github.io/index-html-webpack-example/dist/index.bundle.html).\n\nConsole logs show that the different elements and scripts are made available at the expected times.\n\n#### Building and Running\n\nFrom the `/example` folder, run `npm run build` to build out the `/dist/index.bundle.js` and `/dist/index.bundle.html` files from the original `index.html`.\n\nOnce built, run `npm run serve` to run a stati server and load the page at `localhost:9080/example/dist/`!\n\n## What's Left\n##### Aggresive \u003ctitle\u003e Tags\nThe `html-webpack-plugin` will _always_ generate a title tag with its default template even it one isn't specified or declared as `null`. This prevents any injected title tags from being respected meaning that you have to go in and modify the webpack config if you ever want to change the title tag. I've submitted a PR [here](https://github.com/jantimon/html-webpack-plugin/pull/766) to support this use case.\n\nThis is just a minor annoyance though, because you easily add a fully empty template ([empty-template.ejs](./empty-template.ejs))\n\n##### Multiple App Files\nThe `html-webpack-plugin` does not seem to support building multi-page applications with this use case. If there are multiple source files built with the config, then they will all be included in the single output html file. However, if you are building an app with multiple pages (an `index.html`, `about.html`, and `app.html` pages, for example, then they should all be able to be taken in as entry files and optionally get their own html pages output.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkjohnson%2Findex-html-webpack-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgkjohnson%2Findex-html-webpack-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgkjohnson%2Findex-html-webpack-example/lists"}