{"id":15138690,"url":"https://github.com/webdiscus/webpack-html-scss-boilerplate","last_synced_at":"2026-02-20T17:32:23.683Z","repository":{"id":113225257,"uuid":"589600143","full_name":"webdiscus/webpack-html-scss-boilerplate","owner":"webdiscus","description":"Webpack boilerplate for multipage sites using Nunjucks, HTML, SCSS, JS","archived":false,"fork":false,"pushed_at":"2023-12-30T22:56:06.000Z","size":9617,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-02T17:54:56.827Z","etag":null,"topics":["boilerplate","html","inline-svg","js","multipage","nunjucks","plugin","sass","scss","starter","template","webpack"],"latest_commit_sha":null,"homepage":"https://webdiscus.github.io/webpack-html-scss-boilerplate/index.html","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdiscus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2023-01-16T13:58:35.000Z","updated_at":"2024-07-19T11:48:14.000Z","dependencies_parsed_at":"2024-09-16T12:39:30.433Z","dependency_job_id":"53ac3007-e99b-4351-b111-90d87c1f5ee9","html_url":"https://github.com/webdiscus/webpack-html-scss-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/webdiscus/webpack-html-scss-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fwebpack-html-scss-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fwebpack-html-scss-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fwebpack-html-scss-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fwebpack-html-scss-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdiscus","download_url":"https://codeload.github.com/webdiscus/webpack-html-scss-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fwebpack-html-scss-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29658373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T16:33:43.953Z","status":"ssl_error","status_checked_at":"2026-02-20T16:33:43.598Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["boilerplate","html","inline-svg","js","multipage","nunjucks","plugin","sass","scss","starter","template","webpack"],"created_at":"2024-09-26T07:43:28.106Z","updated_at":"2026-02-20T17:32:23.643Z","avatar_url":"https://github.com/webdiscus.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack boilerplate\nA simple multipage Webpack boilerplate using HTML, SCSS, JS.\nSee the [demo site](https://webdiscus.github.io/webpack-html-scss-boilerplate/index.html).\n\n## Installation\n\n```\ngit clone https://github.com/webdiscus/webpack-html-scss-boilerplate.git\ncd webpack-html-scss-boilerplate\nnpm i\n```\n\n## Usage\n\n### Start local development\n```\nnpm start\n```\n\n### Build production files\n```\nnpm run build\n```\n\n### Preview the production in browser \n```\nnpm run preview\n```\n\n## How it works\n\nTo build static pages is used the powerful [html-bundler-webpack-plugin](https://github.com/webdiscus/html-bundler-webpack-plugin).\n\nAdd the new HTML page in the `entry` option:\n```js\nconst HtmlBundlerPlugin = require('html-bundler-webpack-plugin');\nmodule.exports = {\n  plugins: [\n    new HtmlBundlerPlugin({\n      entry: {\n        // define HTML files here\n        'index': './src/views/home/index.html',  // output dist/index.html\n        'route/to/page': './src/views/page/index.html',  // output dist/route/to/page.html\n      },\n    }),\n  ],\n  // ...\n};\n```\n\n\u003e **Note**\n\u003e \n\u003e Using the `html-bundler-webpack-plugin` the entrypoint is an HTML file.\\\n\u003e All source files of styles, scripts, images can be loaded directly in HTML.\\\n\u003e This Plugin automatically extracts all used source resources into separate output file.\n\nAdd source files of styles, scripts, images directly in HTML:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003c!-- load source styles here --\u003e\n  \u003clink href=\"./style.scss\" rel=\"stylesheet\"\u003e\n  \u003c!-- load source scripts here and/or in body --\u003e\n  \u003cscript src=\"./main.js\" defer=\"defer\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eHomepage\u003c/h1\u003e\n  \u003c!-- load source file of image --\u003e\n  \u003cimg src=\"./homepage.png\"\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSpecify output filenames of script and styles using `js` and `css` options of the Plugin:\n```js\nconst HtmlBundlerPlugin = require('html-bundler-webpack-plugin');\nmodule.exports = {\n  plugins: [\n    new HtmlBundlerPlugin({\n      // path to directory with templates\n      entry: 'src/views/home/',\n      // or define templates manually\n      entry: {\n        'index': './src/views/home/index.html',  // output dist/index.html\n        'route/to/page': './src/views/page/index.html',  // output dist/route/to/page.html\n      },\n      js: {\n        // output filename of extracted JS from source script loaded in HTML via `\u003cscript\u003e` tag\n        filename: 'assets/js/[name].[contenthash:8].js', // output into dist/assets/js/ directory\n      },\n      css: {\n        // output filename of extracted CSS from source style loaded in HTML via `\u003clink\u003e` tag\n        filename: 'assets/css/[name].[contenthash:8].css', // output into dist/assets/css/ directory\n      },\n    }),\n  ],\n  // ...\n};\n```\n\nTo extract images form HTML into separate files add the simple rule to Webpack config:\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /[\\\\/]images[\\\\/].+(png|jpe?g|svg|webp|ico)$/i, // load images from `images` directory only\n        generator: {\n          // output filename of extracted image\n          filename: 'assets/img/[name].[hash:8][ext]', // output into dist/assets/img/ directory\n        },\n      },\n    ],\n  },\n  // ...\n};\n```\n\nTo extract images into separate files or `inline images` add the advanced rule to Webpack config:\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /[\\\\/]images[\\\\/].+(png|jpe?g|svg|webp|ico)$/i, // load images from `images` directory only\n        oneOf: [\n          // inline image using `?inline` query\n          {\n            resourceQuery: /inline/,\n            type: 'asset/inline',\n          },\n          // auto inline by image size\n          {\n            type: 'asset',\n            parser: {\n              dataUrlCondition: {\n                maxSize: 1024,\n              },\n            },\n            generator: {\n              // output filename of extracted image\n              filename: 'assets/img/[name].[hash:8][ext]', // output into dist/assets/img/ directory\n            },\n          },\n        ],\n      },\n    ],\n  },\n  // ...\n};\n```\n\n\u003e **Note**\n\u003e\n\u003e Add the `[\\\\/]images[\\\\/]` to the `test` RegExp when you have `SVG` files for fonts and images to restrict this rule to images only.\n\n\n## Also See\n\n- [ansis][ansis] - The Node.js library for ANSI color styling of text in terminal.\n- [pug-plugin][pug-plugin] - Webpack plugin for Pug.\n- [pug-loader][pug-loader] - Webpack loader for Pug.\n\n## License\n\n[ISC](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/LICENSE)\n\n[ansis]: https://github.com/webdiscus/ansis\n[pug-plugin]: https://github.com/webdiscus/pug-plugin\n[pug-loader]: https://github.com/webdiscus/pug-loader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fwebpack-html-scss-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdiscus%2Fwebpack-html-scss-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fwebpack-html-scss-boilerplate/lists"}