{"id":14963961,"url":"https://github.com/lifenautjoe/webpack-starter-basic","last_synced_at":"2025-04-04T13:09:10.805Z","repository":{"id":25706187,"uuid":"105980574","full_name":"lifenautjoe/webpack-starter-basic","owner":"lifenautjoe","description":"A simple webpack starter project for your basic modern web development needs.","archived":false,"fork":false,"pushed_at":"2023-01-13T22:57:41.000Z","size":19984,"stargazers_count":574,"open_issues_count":27,"forks_count":130,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T12:04:47.342Z","etag":null,"topics":["basic","ecmascript6","es6","es6-starter","phaser","phaserjs","sass","seed","seed-project","simple","spa","starter","starter-kit","webpack","webpack-seed","webpack-simple","webpack-starter","webpack4"],"latest_commit_sha":null,"homepage":"https://lifenautjoe.github.io/webpack-starter-basic/","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/lifenautjoe.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}},"created_at":"2017-10-06T08:00:01.000Z","updated_at":"2025-01-24T14:09:21.000Z","dependencies_parsed_at":"2023-01-14T13:32:56.660Z","dependency_job_id":null,"html_url":"https://github.com/lifenautjoe/webpack-starter-basic","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/lifenautjoe%2Fwebpack-starter-basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fwebpack-starter-basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fwebpack-starter-basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fwebpack-starter-basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifenautjoe","download_url":"https://codeload.github.com/lifenautjoe/webpack-starter-basic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247180983,"owners_count":20897332,"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":["basic","ecmascript6","es6","es6-starter","phaser","phaserjs","sass","seed","seed-project","simple","spa","starter","starter-kit","webpack","webpack-seed","webpack-simple","webpack-starter","webpack4"],"created_at":"2024-09-24T13:32:23.832Z","updated_at":"2025-04-04T13:09:10.787Z","avatar_url":"https://github.com/lifenautjoe.png","language":"JavaScript","readme":"\u003cimg alt=\"Webpack Starter Basic Loo\" src=\"https://github.com/lifenautjoe/webpack-starter-basic/blob/master/src/assets/logo-on-dark-bg.png?raw=true\" width=\"250\"\u003e\n\n# webpack-starter-basic\n[![forthebadge](http://forthebadge.com/images/badges/fo-real.svg)](http://forthebadge.com)[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)\n\n[![dependencies](https://david-dm.org/lifenautjoe/webpack-starter-basic.svg)](https://david-dm.org/lifenautjoe/webpack-starter-basic)\n\nA simple **webpack 4 starter project** for your basic web development needs.\n\nRead more on the [demo website](https://lifenautjoe.github.io/webpack-starter-basic/) or continue reading below.\n\n## Table of Contents\n\n- [Motivation](#motivation)\n- [Features](#features)\n- [Requirements](#requirements)\n- [Usage](#usage)\n- [FAQ](#faq)\n  * [When should I use this starter?](#when-should-i-use-this-starter)\n  * [Where's the common webpack config?](#wheres-the-common-webpack-config)\n  * [How to load fonts](#how-to-load-fonts)\n  * [How to load images](#how-to-load-images)\n    + [In JavaScript](#in-javascript)\n    + [In `index.html`](#in-indexhtml)\n  * [How to install bootstrap 4](#how-to-install-bootstrap-4)    \n- [Websites using this starter kit on the wild](#websites-using-this-starter-kit-on-the-wild)\n\n## Motivation\n\nI needed to make a plain ol' \"drop your mail to stay updated of ongoing developments\" page.\n\nI did not need anything fancy, no frontend framework, no unit testing, simply a **starter project that would let me use sass, ES6, load assets, add vendor prefixes, start a dev server, generate sourcemaps and optimize everything for production.**\n\nI looked around and all I found were heavily specialized and complicated webpack starter projects (`webpack-angular-starter`, `webpack-react-starter`, etc) that are so intertwined with plugins that stripping undesired functionality is almost impossible. \n\nSo I did this.\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/lifenautjoe/webpack-starter-basic PROJECT-NAME\n cd PROJECT-NAME\n```\n\nInstall npm dependencies\n\n```sh\n npm install \n```\n\nRun the kickstart command\n```sh\nnpm run kickstart\n```\n\n**After the project has been kickstarted**\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```sh\nnpm run preview\n```\n\n## FAQ\n\n### When should I use this starter?\n\nYou should use this starter if any of the following are true:\n\n* You want to make a static page. e.g. splash screen, onboarding screen, phaser game, threejs visualization, countdown.\n* You found no good starter kit for whatever you want to do and need a solid place to start from.\n\n**Please note**: If you are going to use a frontend framework like angular or react, you can of course add the required plugins and \nconfiguration but it's normally complicated and quirky enough that it's highly recommended to use one of the existing \nstarter projects such as [react-webpack-babel](https://github.com/alicoding/react-webpack-babel) or for angular projects the [angular-cli](https://github.com/angular/angular-cli).\n\n### Where's the common webpack config?\n\n**There is none and that is good thing.**\n\nThe pattern creates unnecessary confusion over the setup, at the end the config will always be different across environments.\nPeople just put booleans everywhere on the common config to switch between these differing configuration options which is just awful to see and confusing for someone who's just starting on webpack.\n\nThe only truly shared config between these files are the entry js point and the main html template.\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    // ..\n    module: {\n        rules: [\n            // ..\n            {\n                test: /\\.woff$/,\n                loader: 'url-loader',\n                options: {\n                    // Limit at 50k. Above that it emits separate files\n                    limit: 50000,\n                    // url-loader sets mimetype if it's passed.\n                    // Without this it derives it from the file extension\n                    mimetype: 'application/font-woff',\n                    // Output below fonts directory\n                    name: './fonts/[name].[ext]',\n                },\n            }\n            // ..\n        ]\n    }\n    // ..\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```scss\n@font-face {\n    font-family: \"Pixel\";\n    src: url('./../assets/pixel.woff') format('woff');\n}\n\n.body{\n    font-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    // ..\n    module: {\n        rules: [\n            // ..\n            {\n                test: /\\.(ttf|eot|woff|woff2)$/,\n                loader: 'file-loader',\n                options: {\n                    name: 'fonts/[name].[ext]',\n                },\n            }\n            // ..\n        ]\n    }\n    // ..\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```scss\n@font-face {\n    font-family: 'Pixel';\n    src: url('./../assets/pixel.woff2') format('woff2'),\n    url('./../assets/pixel.woff') format('woff'),\n    url('./../assets/pixel.eot') format('embedded-opentype'),\n    url('./../assets/pixel.ttf') format('truetype');\n    /* 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```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```\ndata:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhc3NldHMvaW1hZ2VzL3RpY2stQ3lydkhSdi5zdmciOw==\n```\nIf the image size is larger than `8192` it will be a string with the url to the image such as \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```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\n### How to install Bootstrap 4\n\n\n**After the project has been kickstarted**\n\nInstall bootstrap\n````sh\nnpm install bootstrap@4 --save\n````\n\nInstall bootstrap dependencies.\n````sh\nnpm install popper.js --save\nnpm install jquery --save\n````\n\nReplace the project `index.scss` with \n\n````scss\n@import \"~bootstrap/scss/bootstrap\";\n````\n\nAnd replace the project `index.js` with\n````js\nrequire('./styles/index.scss');\n\nimport PopperJs from 'popper.js';\nimport jquery from 'jquery';\n\n\njquery(()=\u003e{\n    console.log('Hello jQuery + bootstrap 4!');\n});\n````\n\nTo see it all come together, replace the index.html body tag with \n\n````html\n\u003cbody\u003e\n\n\u003cnav class=\"navbar navbar-expand-md navbar-dark bg-dark fixed-top\"\u003e\n    \u003ca class=\"navbar-brand\" href=\"#\"\u003eNavbar\u003c/a\u003e\n    \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarsExampleDefault\" aria-controls=\"navbarsExampleDefault\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n        \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n    \u003c/button\u003e\n\n    \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarsExampleDefault\"\u003e\n        \u003cul class=\"navbar-nav mr-auto\"\u003e\n            \u003cli class=\"nav-item active\"\u003e\n                \u003ca class=\"nav-link\" href=\"#\"\u003eHome \u003cspan class=\"sr-only\"\u003e(current)\u003c/span\u003e\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli class=\"nav-item\"\u003e\n                \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli class=\"nav-item\"\u003e\n                \u003ca class=\"nav-link disabled\" href=\"#\"\u003eDisabled\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli class=\"nav-item dropdown\"\u003e\n                \u003ca class=\"nav-link dropdown-toggle\" href=\"https://example.com\" id=\"dropdown01\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\u003eDropdown\u003c/a\u003e\n                \u003cdiv class=\"dropdown-menu\" aria-labelledby=\"dropdown01\"\u003e\n                    \u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\n                    \u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\n                    \u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cform class=\"form-inline my-2 my-lg-0\"\u003e\n            \u003cinput class=\"form-control mr-sm-2\" type=\"text\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n            \u003cbutton class=\"btn btn-outline-success my-2 my-sm-0\" type=\"submit\"\u003eSearch\u003c/button\u003e\n        \u003c/form\u003e\n    \u003c/div\u003e\n\u003c/nav\u003e\n\n\u003cmain role=\"main\" class=\"container\"\u003e\n\n    \u003cdiv class=\"starter-template\"\u003e\n        \u003ch1\u003eBootstrap starter template\u003c/h1\u003e\n        \u003cp class=\"lead\"\u003eUse this document as a way to quickly start any new project.\u003cbr\u003e All you get is this text and a mostly barebones HTML document.\u003c/p\u003e\n    \u003c/div\u003e\n\n\u003c/main\u003e\u003c!-- /.container --\u003e\n\u003c/body\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```sh\nnpm run preview\n```\n\n\n⚠️ Please remember to remove the Google Analytics tag in the `index.html` file as soon as you make the template yours.\n\n```html\n\u003c!-- Global Site Tag (gtag.js) - Google Analytics --\u003e\n\u003cscript async src=\"https://www.googletagmanager.com/gtag/js?id=UA-101423651-2\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    window.dataLayer = window.dataLayer || [];\n    function gtag(){dataLayer.push(arguments);}\n    gtag('js', new Date());\n    gtag('config', 'UA-101423651-2');\n\u003c/script\u003e\n```\n\n\n## Websites using this starter kit on the wild\n\n* [Droppable library](https://github.com/lifenautjoe/droppable)\n* [Noel Event Emitter](https://github.com/lifenautjoe/noel)\n* [ChooseIT Wishbot](http://voeux2018.choosit.com/)\n* [Webpack Starter Basic](https://lifenautjoe.github.io/webpack-starter-basic/)\n* [Okuna](https://www.okuna.io/)\n\nHave a website online built with this starter kit and would like to add it to the list? Open an issue!\n\n\n___\nAuthor [Joel Hernandez](www.lifenautjoe.com)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifenautjoe%2Fwebpack-starter-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifenautjoe%2Fwebpack-starter-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifenautjoe%2Fwebpack-starter-basic/lists"}