{"id":17659696,"url":"https://github.com/yoriiis/chunks-webpack-plugin","last_synced_at":"2025-07-14T22:39:49.003Z","repository":{"id":48273591,"uuid":"172137774","full_name":"yoriiis/chunks-webpack-plugin","owner":"yoriiis","description":"Create HTML files with entrypoints and chunks relations to serve your bundles","archived":false,"fork":false,"pushed_at":"2025-01-13T10:26:07.000Z","size":1659,"stargazers_count":27,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T09:09:40.970Z","etag":null,"topics":["chunks","chunks-webpack-plugin","entrypoints","github-actions","html-files","html-tags","javascript","optimization","splitchunksplugin","typescript","webpack","webpack-bundles","webpack-configuration"],"latest_commit_sha":null,"homepage":"https://webpack.js.org/plugins/chunks-webpack-plugin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yoriiis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["yoriiis"]}},"created_at":"2019-02-22T21:35:23.000Z","updated_at":"2025-01-13T10:24:18.000Z","dependencies_parsed_at":"2024-10-23T16:47:19.656Z","dependency_job_id":"f6118ed8-c810-43cb-9f61-bc614ba5ba1b","html_url":"https://github.com/yoriiis/chunks-webpack-plugin","commit_stats":{"total_commits":223,"total_committers":6,"mean_commits":"37.166666666666664","dds":0.08071748878923768,"last_synced_commit":"c30b1e05370388b85cfe3fff33749e8d7c821648"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoriiis%2Fchunks-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoriiis%2Fchunks-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoriiis%2Fchunks-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoriiis%2Fchunks-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoriiis","download_url":"https://codeload.github.com/yoriiis/chunks-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036063,"owners_count":21037092,"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","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":["chunks","chunks-webpack-plugin","entrypoints","github-actions","html-files","html-tags","javascript","optimization","splitchunksplugin","typescript","webpack","webpack-bundles","webpack-configuration"],"created_at":"2024-10-23T16:07:58.216Z","updated_at":"2025-07-14T22:39:48.990Z","avatar_url":"https://github.com/yoriiis.png","language":"JavaScript","funding_links":["https://github.com/sponsors/yoriiis"],"categories":[],"sub_categories":[],"readme":"# ChunksWebpackPlugin\n\n![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/yoriiis/chunks-webpack-plugin/build.yml?branch=main\u0026style=for-the-badge) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/chunks-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/chunks-webpack-plugin?branch=main) [![Npm downloads](https://img.shields.io/npm/dm/chunks-webpack-plugin?color=fb3e44\u0026label=npm%20downloads\u0026style=for-the-badge)](https://npmjs.com/package/chunks-webpack-plugin)\n\nThe `chunks-webpack-plugin` creates HTML files with entry points and chunks relations to serve your webpack bundles. It is suitable with multi-page applications that contain multiple entry points.\n\nSince webpack 4, `SplitChunksPlugin` offers the possibility to optimizes all chunks. It can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks. See the webpack documentation of [`splitChunks.chunks`](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkschunks) for details.\n\n`splitChunks.chunks` option can be set to automatically generate new chunks associated with an entry point. For example, entry points `a.js` and `b.js` share common code with the file `vendors~a~b.js`.\n\nWith multiple entry points, it can be difficult to identify relation between the auto-generated chunks and entry points.\n\n`chunks-webpack-plugin` parses the webpack compilation entry points to get all files associated with the entry points. Then, it generates HTML files which include all assets filtered by an entry point and the`chunks-manifest.json` file.\n\n## Zero configuration\n\nIt works without configuration. For advanced usage, see the [using configuration section](#using-a-configuration).\n\n## Installation\n\n`chunks-webpack-plugin` is available on npm as [`chunks-webpack-plugin`](https://www.npmjs.com/package/chunks-webpack-plugin) and as [`chunks-webpack-plugin` on GitHub](https://github.com/yoriiis/chunks-webpack-plugin).\n\n```bash\nnpm install chunks-webpack-plugin --save-dev\n```\n\n```bash\nyarn add chunks-webpack-plugin --dev\n```\n\n\u003e [!WARNING]\n\u003e Plugin `chunks-webpack-plugin@10` is ESM only.\n\u003e [!NOTE]\n\u003e Minimum supported `Node.js` version is `16.20.0` and Webpack `\u003e=5.10.3`.\n\n## Example\n\nThe project includes a minimalist example in the `./example` directory. Run the `npm run build:example` command to execute the Webpack example and see the plugin's implementation in action.\n\n## Basic usage\n\n`chunks-webpack-plugin` will generate two HTML files for each entry point. Each filename contains the entry point name, the `{{entry}}` placeholder is automatically replaced.\n\n- `{{entry}}-styles.html`: contains all HTML `\u003clink\u003e` tags\n- `{{entry}}-scripts.html`: contains all HTML `\u003cscript\u003e` tags\n\nFirst, let's add the plugin to the webpack configuration.\n\n**webpack.config.js**\n\n```js\nimport ChunksWebpackPlugin from 'chunks-webpack-plugin';\n\nexport default {\n  plugins: [new ChunksWebpackPlugin()]\n};\n```\n\nHTML files are built in the output path directory with the rest of the webpack compilation.\n\nNow you can include the generated HTML files into your HTML page templates. You can do it with e.g. Twig.\n\n**main-styles.html**\n\n```html\n\u003clink rel=\"stylesheet\" href=\"main.css\" /\u003e\n```\n\n**main-scripts.html**\n\n```html\n\u003cscript defer src=\"main.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Using a configuration\n\nYou can pass a configuration object to `chunks-webpack-plugin` to override the default settings.\n\n### `filename`\n\nType:\n\n```ts\ntype filename = string;\n```\n\nDefault: `'[name]-[type].html'`\n\nTells the plugin whether to personalize the filename of the generated files. Files are processed by the webpack compilation and generated in the output path directory. The placeholder `[name]` is automatically replaced by entry points names and `[type]` by `styles|scripts`.\n\n```js\nnew ChunksWebpackPlugin({\n  filename: 'templates/[name]-[type].html'\n});\n```\n\n\u003e [!NOTE]\n\u003e The `filename` can contain directories, which will be created automatically.\n\n### `templateStyle`\n\nType:\n\n```ts\ntype templateStyle = (name: string, entryName: string) =\u003e string;\n```\n\nDefault:\n\n```js\n(name) =\u003e `\u003clink rel=\"stylesheet\" href=\"${name}\" /\u003e`;\n```\n\nTells the plugin whether to personalize the default template for the HTML `\u003cstyle\u003e` tags. For example, add additional attributes or a CDN prefix.\n\n```js\nexport default {\n  plugins: [\n    new ChunksWebpackPlugin({\n      templateStyle: (name) =\u003e `\u003clink rel=\"stylesheet\" href=\"https://cdn.domain.com${name}\" /\u003e`\n    })\n  ]\n};\n```\n\n### `templateScript`\n\nType:\n\n```ts\ntype templateScript = (name: string, entryName: string) =\u003e string;\n```\n\nDefault:\n\n```js\n(name) =\u003e `\u003cscript defer src=\"${name}\"\u003e\u003c/script\u003e`;\n```\n\nTells the plugin whether to personalize the default template for the HTML `\u003cscript\u003e` tags. For example, add additional attributes or a CDN prefix.\n\n```js\nexport default {\n  plugins: [\n    new ChunksWebpackPlugin({\n      templateScript: (name) =\u003e `\u003cscript defer src=\"https://cdn.domain.com${name}\"\u003e\u003c/script\u003e`\n    })\n  ]\n};\n```\n\n### `generateChunksManifest`\n\nType:\n\n```ts\ntype generateChunksManifest = boolean;\n```\n\nDefault: `false`\n\nTells the plugin whether to generate the `chunks-manifest.json`. The file contains the list of all chunks grouped by entry points. See the [chunks-manifest.json example](example/dist/chunks-manifest.json).\n\n```js\nexport default {\n  plugins: [\n    new ChunksWebpackPlugin({\n      generateChunksManifest: true\n    })\n  ]\n};\n```\n\n### `generateChunksFiles`\n\nType:\n\n```ts\ntype generateChunksFiles = boolean;\n```\n\nDefault: `true`\n\nTells the plugin whether to generate the HTML files.\n\n```js\nexport default {\n  plugins: [\n    new ChunksWebpackPlugin({\n      generateChunksFiles: false\n    })\n  ]\n};\n```\n\n\u003e [!WARNING]\n\u003e When set to `false`, HTML files will not be generated. It can **only** be useful together with `generateChunksManifest` option set to `true` for custom generation of the HTML files.\n\n---\n\n\u003cdetails\u003e\n\n\u003csummary\u003eMultiple entrypoints example\u003c/summary\u003e\n\n## Multiple entrypoints example\n\nExample of the webpack configuration with multiple entry points which share common code with the `splitChunks` option.\n\n```js\nimport ChunksWebpackPlugin from 'chunks-webpack-plugin';\nimport path from 'node:path';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nexport default {\n  entry: {\n    home: 'home.js',\n    news: 'news.js'\n  },\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, './dist')\n  },\n  plugins: [new ChunksWebpackPlugin()],\n  optimization: {\n    splitChunks: {\n      chunks: 'all'\n    }\n  }\n};\n```\n\nThe plugin will generate all files in the output path directory:\n\n**home-styles.html**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003clink rel=\"stylesheet\" href=\"vendors~home~news.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"home.css\" /\u003e\n```\n\n**home-scripts.html**\n\n```html\n\u003cscript defer src=\"vendors~home~news.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"home.js\"\u003e\u003c/script\u003e\n```\n\n**news-styles.html**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003clink rel=\"stylesheet\" href=\"vendors~home~news.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"news.css\" /\u003e\n```\n\n**news-scripts.html**\n\n```html\n\u003cscript defer src=\"vendors~home~news.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"news.js\"\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## License\n\n`chunks-webpack-plugin` is licensed under the [MIT License](http://opensource.org/licenses/MIT).\n\nCreated with ♥ by [@yoriiis](http://github.com/yoriiis).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoriiis%2Fchunks-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoriiis%2Fchunks-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoriiis%2Fchunks-webpack-plugin/lists"}