{"id":13299634,"url":"https://github.com/ajzamora/webpack-and-chill","last_synced_at":"2025-03-10T11:32:15.500Z","repository":{"id":39336634,"uuid":"217945923","full_name":"ajzamora/webpack-and-chill","owner":"ajzamora","description":"webpack-and-chill — a lightweight boilerplate optimized \u0026 backed with next generation tools such as pug, sass, babel, and much more so you can quickly build your web app or site.","archived":false,"fork":false,"pushed_at":"2022-12-11T11:11:37.000Z","size":1183,"stargazers_count":0,"open_issues_count":26,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-02T15:47:36.162Z","etag":null,"topics":["babel","config","ecmascript","initialize","pug","sass","setup","starter","webpack"],"latest_commit_sha":null,"homepage":"","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/ajzamora.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-28T01:54:56.000Z","updated_at":"2019-11-04T18:19:41.000Z","dependencies_parsed_at":"2022-09-11T07:22:39.543Z","dependency_job_id":null,"html_url":"https://github.com/ajzamora/webpack-and-chill","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajzamora%2Fwebpack-and-chill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajzamora%2Fwebpack-and-chill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajzamora%2Fwebpack-and-chill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajzamora%2Fwebpack-and-chill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajzamora","download_url":"https://codeload.github.com/ajzamora/webpack-and-chill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242843102,"owners_count":20194326,"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":["babel","config","ecmascript","initialize","pug","sass","setup","starter","webpack"],"created_at":"2024-07-29T17:37:45.627Z","updated_at":"2025-03-10T11:32:15.170Z","avatar_url":"https://github.com/ajzamora.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e What's Included? \u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n      \u003cimg height=\"130\" src=\"https://webpack.js.org/assets/icon-square-big.svg\" alt=\"webpack\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://pugjs.org\"\u003e\n    \u003cimg height=\"120\" src=\"https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg\" alt=\"pug\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://babeljs.io/\"\u003e\n    \u003cimg height=\"90\" alt=\"Babel\" src=\"https://raw.githubusercontent.com/babel/logo/master/babel.png\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://sass-lang.com\"\u003e\n    \u003cimg height=\"85\" alt=\"Sass\" src=\"https://rawgit.com/sass/sass-site/master/source/assets/img/logos/logo.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e Write PugJS *(previously jade)*, SASS/SCSS, and ECMASCRIPT right off the bat. \u003c/h4\u003e\n\n\u003ch2 align=\"center\"\u003e How to use it? Just hit this commands: \u003c/h2\u003e\n\n##### To install all your dependencies in package.json:\n```\nnpm install\n```\n##### *this will download the tools webpack needs and put it in ./node_modules folder*\n##### Development mode (run any of these):\n``` script\nnpm run dev                 // build dev locally\nnpm run devw                // build dev locally, and watch for changes\nnpm run devwo               // build dev locally, watch for changes, and open the project in browser\n```\n##### *this will build your app in DEVELOPMENT mode and create it under ./dev folder*\n\n##### Production mode:\n\n##### *this will build your app in PRODUCTION mode and create it under ./dist folder*\n###### with features such as:\n- [x] *built-in [css-reset-and-normalize](https://github.com/simbo/css-reset-and-normalize) for cross-browser compatibility (NEW)*\n- [x] *cache busting (hashing system)*\n- [x] *refactoring codes instantly (uglify or minify)*\n- [x] *chunking and bundling* --\n- [x] *other plugins used for optimization: mini-css-extract-plugin, optimize-css-assets-webpack-plugin, clean-webpack-plugin*\n- [x] *easier settings modification* (shown below)\n\n```\n/************************************************\n-- WEBPACK CONFIG JS: variables / package imports\n************************************************/\nconst path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst OptimizeCssAssetsPlugin = require(\"optimize-css-assets-webpack-plugin\");\nconst TerserPlugin = require(\"terser-webpack-plugin\");\nconst {CleanWebpackPlugin} = require(\"clean-webpack-plugin\");\n\n/************************************************\n-- 1. ADD YOUR PAGES in commonPages; 2. (optional) : edit arrPages/path in entryJS and entryPug if needed\n************************************************/\nconst commonPages = ['index', 'about'];\nconst entryJS = {...};\nconst entryPug = {...}\n\n/************************************************\n-- configured rules variables\n************************************************/\nconst rules = {...};\n/************************************************\n-- DEVELOPMENT \u0026 PRODUCTION common config\n************************************************/\nlet config = {...};\n```\n\n### PugJS\nPug is a high-performance template engine heavily influenced by [Haml](http://haml.info/)\n and implemented with JavaScript for [Node.js](http://nodejs.org) and browsers.\n\n### Sass/Scss\nSass makes CSS fun again. Sass is an extension of CSS, adding nested rules,\nvariables, mixins, selector inheritance, and more. It's translated to\nwell-formatted, standard CSS using the command line tool or a plugin for your\nbuild system.\n\n### Babel\nThe compiler for writing next generation JavaScript.\nBabel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.\n\n### css-reset-normalize\nThis combination of css reset and normalize is based on\nCSS Reset 2.0 (public domain) by Eric Meyer\nnormalize.css 8.0.1 (MIT) by Nicolas Gallagher and Jonathan Neal\nBootstrap 4.3.1 Reboot (MIT) by Twitter Inc.\n\nRules and Reasons\nTake a look at the [source code](https://github.com/simbo/css-reset-and-normalize/blob/HEAD/scss/reset-and-normalize.scss), it has comments.\n\nWhy use it?: Here's an article about [Reboot, Resets and Reasoning](https://css-tricks.com/reboot-resets-reasoning/) by Chris Coyier.\n\nusage:\n\u003ch1 align=\"center\"\u003e What's Included? \u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n      \u003cimg height=\"130\" src=\"https://webpack.js.org/assets/icon-square-big.svg\" alt=\"webpack\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://pugjs.org\"\u003e\n    \u003cimg height=\"120\" src=\"https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg\" alt=\"pug\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://babeljs.io/\"\u003e\n    \u003cimg height=\"90\" alt=\"Babel\" src=\"https://raw.githubusercontent.com/babel/logo/master/babel.png\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://sass-lang.com\"\u003e\n    \u003cimg height=\"85\" alt=\"Sass\" src=\"https://rawgit.com/sass/sass-site/master/source/assets/img/logos/logo.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e Write PugJS *(previously jade)*, SASS/SCSS, and ECMASCRIPT right off the bat. \u003c/h4\u003e\n\n\u003ch2 align=\"center\"\u003e How to use it? Just hit this commands: \u003c/h2\u003e\n\n##### To install all your dependencies in package.json:\n```\nnpm install\n```\n##### *this will download the tools webpack needs and put it in ./node_modules folder*\n##### Development mode (run any of these):\n``` script\nnpm run dev                 // build dev locally\nnpm run devw                // build dev locally, and watch for changes\nnpm run devwo               // build dev locally, watch for changes, and open the project in browser\n```\n##### *this will build your app in DEVELOPMENT mode and create it under ./dev folder*\n\n##### Production mode:\n\n##### *this will build your app in PRODUCTION mode and create it under ./dist folder*\n###### with features such as:\n- [x] *built-in [css-reset-and-normalize](https://github.com/simbo/css-reset-and-normalize) for cross-browser compatibility (NEW)*\n- [x] *cache busting (hashing system)*\n- [x] *refactoring codes instantly (uglify or minify)*\n- [x] *chunking and bundling* --\n- [x] *other plugins used for optimization: mini-css-extract-plugin, optimize-css-assets-webpack-plugin, clean-webpack-plugin*\n- [x] *easier settings modification* (shown below)\n\n```\n/************************************************\n-- WEBPACK CONFIG JS: variables / package imports\n************************************************/\nconst path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst OptimizeCssAssetsPlugin = require(\"optimize-css-assets-webpack-plugin\");\nconst TerserPlugin = require(\"terser-webpack-plugin\");\nconst {CleanWebpackPlugin} = require(\"clean-webpack-plugin\");\n\n/************************************************\n-- 1. ADD YOUR PAGES in commonPages; 2. (optional) : edit arrPages/path in entryJS and entryPug if needed\n************************************************/\nconst commonPages = ['index', 'about'];\nconst entryJS = {...};\nconst entryPug = {...}\n\n/************************************************\n-- configured rules variables\n************************************************/\nconst rules = {...};\n/************************************************\n-- DEVELOPMENT \u0026 PRODUCTION common config\n************************************************/\nlet config = {...};\n```\n\n### PugJS\nPug is a high-performance template engine heavily influenced by [Haml](http://haml.info/)\n and implemented with JavaScript for [Node.js](http://nodejs.org) and browsers.\n\n### Sass/Scss\nSass makes CSS fun again. Sass is an extension of CSS, adding nested rules,\nvariables, mixins, selector inheritance, and more. It's translated to\nwell-formatted, standard CSS using the command line tool or a plugin for your\nbuild system.\n\n### Babel\nThe compiler for writing next generation JavaScript.\nBabel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.\n\n### css-reset-and-normalize\nThis combination of css reset and normalize is based on\nCSS Reset 2.0 (public domain) by Eric Meyer\nnormalize.css 8.0.1 (MIT) by Nicolas Gallagher and Jonathan Neal\nBootstrap 4.3.1 Reboot (MIT) by Twitter Inc.\n\nRules and Reasons\nTake a look at the [source code](https://github.com/simbo/css-reset-and-normalize/blob/HEAD/scss/reset-and-normalize.scss), it has comments.\n\nWhy use it?: Here's an article about [Reboot, Resets and Reasoning](https://css-tricks.com/reboot-resets-reasoning/) by Chris Coyier.\n\nusage:\n```\n\u003clink rel=\"stylesheet\" href=\"path/to/reset-and-normalize.min.css\"\u003e                  // HTML \u003clink\u003e`  \n@import \"path/to/reset-and-normalize.min.css\";                                      // CSS @import\n@import 'path/to/node_modules/css-reset-and-normalize/scss/reset-and-normalize';    // SCSS @import\n@require 'path/to/node_modules/css-reset-and-normalize/stylus/reset-and-normalize'  // Stylus @require\n@import 'path/to/node_modules/css-reset-and-normalize/less/reset-and-normalize';    // LESS @import\n```\n\n### License\n\n[Webpack-and-chill](https://github.com/ajzamora/webpack-and-chill) is [MIT licensed](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajzamora%2Fwebpack-and-chill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajzamora%2Fwebpack-and-chill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajzamora%2Fwebpack-and-chill/lists"}