{"id":16728150,"url":"https://github.com/adityasonel/webpack-starter-kit","last_synced_at":"2025-04-10T11:00:21.064Z","repository":{"id":123510542,"uuid":"302418973","full_name":"adityasonel/webpack-starter-kit","owner":"adityasonel","description":"A simple and reliable webpack starter kit for your web adventures needs, feat. Bootstrap-v4, JQuery or TailwindCSS","archived":false,"fork":false,"pushed_at":"2020-10-12T17:23:29.000Z","size":1613,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T09:47:10.005Z","etag":null,"topics":["bootstrap","javascript","jquery","scss","seed","starter-kit","tailwind","tailwind-css","tailwind-starter-kit","webpack","webpack-starter","webpack4"],"latest_commit_sha":null,"homepage":"https://adityasonel.github.io/webpack-starter-kit/","language":"JavaScript","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/adityasonel.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":"2020-10-08T17:47:32.000Z","updated_at":"2021-12-15T06:23:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"808ec1fd-5b8c-4cea-9157-455c8df61377","html_url":"https://github.com/adityasonel/webpack-starter-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityasonel%2Fwebpack-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityasonel%2Fwebpack-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityasonel%2Fwebpack-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adityasonel%2Fwebpack-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adityasonel","download_url":"https://codeload.github.com/adityasonel/webpack-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248206831,"owners_count":21065188,"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":["bootstrap","javascript","jquery","scss","seed","starter-kit","tailwind","tailwind-css","tailwind-starter-kit","webpack","webpack-starter","webpack4"],"created_at":"2024-10-12T23:08:50.312Z","updated_at":"2025-04-10T11:00:21.048Z","avatar_url":"https://github.com/adityasonel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Webpack starter kit feat. Bootstrap-v4, JQuery or TailwindCSS\n\n![Webpack](https://img.shields.io/npm/v/webpack?label=webpack\u0026style=flat-square)\n![TailwindCSS](https://img.shields.io/npm/v/tailwindcss?label=tailwindcss\u0026style=flat-square)\n![Bootstrap-v4](https://img.shields.io/npm/v/bootstrap?label=bootstrap-v4\u0026style=flat-square)\n![Jquery](https://img.shields.io/npm/v/jquery?label=jquery\u0026style=flat-square)\n\n![GitHub stars](https://img.shields.io/github/stars/adityasonel/webpack-starter-kit?style=social)\n![GitHub forks](https://img.shields.io/github/forks/adityasonel/webpack-starter-kit?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/adityasonel/webpack-starter-kit?style=social)\n![Twitter Follow](https://img.shields.io/twitter/follow/SonelAditya?label=Follow\u0026style=social)\n\nA simple and reliable webpack starter kit for your web adventures needs, feat. Bootstrap-v4, JQuery or TailwindCSS\n\n## Features\n\n-   Separated development and production webpack settings you can understand\n-   Sass\n-   ES6\n-   Asset loading\n-   CSS Vendor prefixing\n-   Development server\n-   Sourcemaps\n-   Favicons generation\n-   Production optimizations\n-   Mobile browser header color\n\n## Requirements\n\n-   [Node](https://nodejs.org) \u003e 7.6\n\n## Usage\n\nSubstitute `PROJECT-NAME` for your project name.\n\nClone the repository\n\n```sh\n git clone https://github.com/adityasonel/webpack-starter-kit PROJECT-NAME\n cd PROJECT-NAME\n```\n\nOr you can head-start with pre setuped tailwindcss kit as\n\n```sh\n git clone --single-branch --branch tailwind-kit  https://github.com/adityasonel/webpack-starter-kit PROJECT-NAME\n cd PROJECT-NAME\n```\n\nOr you can also start with bootstrap-jquery setup kit as\n\n```sh\n git clone --single-branch --branch bootstrap-kit  https://github.com/adityasonel/webpack-starter-kit PROJECT-NAME\n cd PROJECT-NAME\n```\n\nInstall npm dependencies\n\n```sh\n npm install or yarn\n```\n\nTo start the development server\n\n```sh\nnpm start\n```\n\nTo build for production\n\n```sh\nnpm run build\n```\n\nTo preview the production build\n\n```sh\nnpm run preview\n```\n\n### How to load fonts\n\nIf you don't support Opera Mini, browsers support the .woff format. Its newer version .woff2, is widely supported by modern browsers and can be a good alternative.\n\nIf you decide to use only this format you can load the fonts in a similar manner to images.\n\nIn your `webpack.dev.js` and `webpack.prod.js` add the following\n\n```js\nmodule.exports = {\n\t// ..\n\tmodule: {\n\t\trules: [\n\t\t\t// ..\n\t\t\t{\n\t\t\t\ttest: /\\.woff$/,\n\t\t\t\tloader: \"url-loader\",\n\t\t\t\toptions: {\n\t\t\t\t\t// Limit at 50k. Above that it emits separate files\n\t\t\t\t\tlimit: 50000,\n\t\t\t\t\t// url-loader sets mimetype if it's passed.\n\t\t\t\t\t// Without this it derives it from the file extension\n\t\t\t\t\tmimetype: \"application/font-woff\",\n\t\t\t\t\t// Output below fonts directory\n\t\t\t\t\tname: \"./fonts/[name].[ext]\",\n\t\t\t\t},\n\t\t\t},\n\t\t\t// ..\n\t\t],\n\t},\n\t// ..\n};\n```\n\nAnd let's say your font is in the folder `assets` with the name `pixel.woff`\n\nYou can add it and use it in `index.scss` as\n\n```scss\n@font-face {\n\tfont-family: \"Pixel\";\n\tsrc: url(\"./../assets/pixel.woff\") format(\"woff\");\n}\n\n.body {\n\tfont-family: \"Pixel\", sans-serif;\n}\n```\n\nIf you would like to support all kinds of font types, remove the woff rule we previously added to `webpack.dev.js` and `webpack.prod.js` and add the following\n\n```js\nmodule.exports = {\n\t// ..\n\tmodule: {\n\t\trules: [\n\t\t\t// ..\n\t\t\t{\n\t\t\t\ttest: /\\.(ttf|eot|woff|woff2)$/,\n\t\t\t\tloader: \"file-loader\",\n\t\t\t\toptions: {\n\t\t\t\t\tname: \"fonts/[name].[ext]\",\n\t\t\t\t},\n\t\t\t},\n\t\t\t// ..\n\t\t],\n\t},\n\t// ..\n};\n```\n\nAnd assuming you have your fonts in the directory `assets` with names `pixel.woff`, `pixel.ttf`, `pixel.eot` , etc.\n\nYou can add it and use it in `index.scss` as\n\n```scss\n@font-face {\n\tfont-family: \"Pixel\";\n\tsrc: url(\"./../assets/pixel.woff2\") format(\"woff2\"), url(\"./../assets/pixel.woff\") format(\"woff\"),\n\t\turl(\"./../assets/pixel.eot\") format(\"embedded-opentype\"), url(\"./../assets/pixel.ttf\")\n\t\t\tformat(\"truetype\");\n\t/* Add other formats as you see fit */\n}\n```\n\n### How to load images\n\n#### In JavaScript\n\nYou can require an image from JavaScript like\n\n```js\nconst myImage = require(\"./assets/icon.png\");\n```\n\nIf the image size in bytes is smaller than `8192`you, `myImage` will be a string with the encoded image path such as\n\n```\ndata:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhc3NldHMvaW1hZ2VzL3RpY2stQ3lydkhSdi5zdmciOw==\n```\n\nIf the image size is larger than `8192` it will be a string with the url to the image such as\n\n```\nsrc/assets/icon.png?hash=5b1f36bc41ab31f5b801\n```\n\nThis limit is set so images like icons are not loaded through a request but you can force the loader to give you image urls always by doing the following but should not be necessary. The limit works 90% of the time.\n\n```js\nconst myImage = require(\"!!url!/assets/icon.png\");\n```\n\n#### In `index.html`\n\nIf you would like to include an image on your `index.html` file, place the path of the image in a webpack require statement`\u003c%= require(imagePath) %\u003e`.\n\n```html\n  \u003cimg class=\"splash-title__img\"\n                     src=\"\u003c%= require('./src/assets/logo-on-dark-bg.png') %\u003e\"\n                     alt=\"webpack logo\"\u003e\u003c/a\u003e\n```\n\nStart the development server and `voilà`.\n\n```sh\nnpm start\n```\n\nTo build for production\n\n```sh\nnpm run build\n```\n\nTo preview the production build\n\n```sh\nnpm run preview\n```\n\n---\n\nAuthor [Aditya Sonel](https://github.com/adityasonel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadityasonel%2Fwebpack-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadityasonel%2Fwebpack-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadityasonel%2Fwebpack-starter-kit/lists"}