Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajzamora/webpack-and-chill
webpack-and-chill — a lightweight boilerplate optimized & backed with next generation tools such as pug, sass, babel, and much more so you can quickly build your web app or site.
https://github.com/ajzamora/webpack-and-chill
babel config ecmascript initialize pug sass setup starter webpack
Last synced: 15 days ago
JSON representation
webpack-and-chill — a lightweight boilerplate optimized & backed with next generation tools such as pug, sass, babel, and much more so you can quickly build your web app or site.
- Host: GitHub
- URL: https://github.com/ajzamora/webpack-and-chill
- Owner: ajzamora
- License: mit
- Created: 2019-10-28T01:54:56.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T11:11:37.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T15:47:36.162Z (over 1 year ago)
- Topics: babel, config, ecmascript, initialize, pug, sass, setup, starter, webpack
- Language: JavaScript
- Homepage:
- Size: 1.13 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
What's Included?
Write PugJS *(previously jade)*, SASS/SCSS, and ECMASCRIPT right off the bat.
How to use it? Just hit this commands:
##### To install all your dependencies in package.json:
```
npm install
```
##### *this will download the tools webpack needs and put it in ./node_modules folder*
##### Development mode (run any of these):
``` script
npm run dev // build dev locally
npm run devw // build dev locally, and watch for changes
npm run devwo // build dev locally, watch for changes, and open the project in browser
```
##### *this will build your app in DEVELOPMENT mode and create it under ./dev folder*
##### Production mode:
##### *this will build your app in PRODUCTION mode and create it under ./dist folder*
###### with features such as:
- [x] *built-in [css-reset-and-normalize](https://github.com/simbo/css-reset-and-normalize) for cross-browser compatibility (NEW)*
- [x] *cache busting (hashing system)*
- [x] *refactoring codes instantly (uglify or minify)*
- [x] *chunking and bundling* --
- [x] *other plugins used for optimization: mini-css-extract-plugin, optimize-css-assets-webpack-plugin, clean-webpack-plugin*
- [x] *easier settings modification* (shown below)
```
/************************************************
-- WEBPACK CONFIG JS: variables / package imports
************************************************/
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
/************************************************
-- 1. ADD YOUR PAGES in commonPages; 2. (optional) : edit arrPages/path in entryJS and entryPug if needed
************************************************/
const commonPages = ['index', 'about'];
const entryJS = {...};
const entryPug = {...}
/************************************************
-- configured rules variables
************************************************/
const rules = {...};
/************************************************
-- DEVELOPMENT & PRODUCTION common config
************************************************/
let config = {...};
```
### PugJS
Pug is a high-performance template engine heavily influenced by [Haml](http://haml.info/)
and implemented with JavaScript for [Node.js](http://nodejs.org) and browsers.
### Sass/Scss
Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules,
variables, mixins, selector inheritance, and more. It's translated to
well-formatted, standard CSS using the command line tool or a plugin for your
build system.
### Babel
The compiler for writing next generation JavaScript.
Babel 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.
### css-reset-normalize
This combination of css reset and normalize is based on
CSS Reset 2.0 (public domain) by Eric Meyer
normalize.css 8.0.1 (MIT) by Nicolas Gallagher and Jonathan Neal
Bootstrap 4.3.1 Reboot (MIT) by Twitter Inc.
Rules and Reasons
Take a look at the [source code](https://github.com/simbo/css-reset-and-normalize/blob/HEAD/scss/reset-and-normalize.scss), it has comments.
Why use it?: Here's an article about [Reboot, Resets and Reasoning](https://css-tricks.com/reboot-resets-reasoning/) by Chris Coyier.
usage:
What's Included?
Write PugJS *(previously jade)*, SASS/SCSS, and ECMASCRIPT right off the bat.
How to use it? Just hit this commands:
##### To install all your dependencies in package.json:
```
npm install
```
##### *this will download the tools webpack needs and put it in ./node_modules folder*
##### Development mode (run any of these):
``` script
npm run dev // build dev locally
npm run devw // build dev locally, and watch for changes
npm run devwo // build dev locally, watch for changes, and open the project in browser
```
##### *this will build your app in DEVELOPMENT mode and create it under ./dev folder*
##### Production mode:
##### *this will build your app in PRODUCTION mode and create it under ./dist folder*
###### with features such as:
- [x] *built-in [css-reset-and-normalize](https://github.com/simbo/css-reset-and-normalize) for cross-browser compatibility (NEW)*
- [x] *cache busting (hashing system)*
- [x] *refactoring codes instantly (uglify or minify)*
- [x] *chunking and bundling* --
- [x] *other plugins used for optimization: mini-css-extract-plugin, optimize-css-assets-webpack-plugin, clean-webpack-plugin*
- [x] *easier settings modification* (shown below)
```
/************************************************
-- WEBPACK CONFIG JS: variables / package imports
************************************************/
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
/************************************************
-- 1. ADD YOUR PAGES in commonPages; 2. (optional) : edit arrPages/path in entryJS and entryPug if needed
************************************************/
const commonPages = ['index', 'about'];
const entryJS = {...};
const entryPug = {...}
/************************************************
-- configured rules variables
************************************************/
const rules = {...};
/************************************************
-- DEVELOPMENT & PRODUCTION common config
************************************************/
let config = {...};
```
### PugJS
Pug is a high-performance template engine heavily influenced by [Haml](http://haml.info/)
and implemented with JavaScript for [Node.js](http://nodejs.org) and browsers.
### Sass/Scss
Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules,
variables, mixins, selector inheritance, and more. It's translated to
well-formatted, standard CSS using the command line tool or a plugin for your
build system.
### Babel
The compiler for writing next generation JavaScript.
Babel 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.
### css-reset-and-normalize
This combination of css reset and normalize is based on
CSS Reset 2.0 (public domain) by Eric Meyer
normalize.css 8.0.1 (MIT) by Nicolas Gallagher and Jonathan Neal
Bootstrap 4.3.1 Reboot (MIT) by Twitter Inc.
Rules and Reasons
Take a look at the [source code](https://github.com/simbo/css-reset-and-normalize/blob/HEAD/scss/reset-and-normalize.scss), it has comments.
Why use it?: Here's an article about [Reboot, Resets and Reasoning](https://css-tricks.com/reboot-resets-reasoning/) by Chris Coyier.
usage:
```
// HTML `
@import "path/to/reset-and-normalize.min.css"; // CSS @import
@import 'path/to/node_modules/css-reset-and-normalize/scss/reset-and-normalize'; // SCSS @import
@require 'path/to/node_modules/css-reset-and-normalize/stylus/reset-and-normalize' // Stylus @require
@import 'path/to/node_modules/css-reset-and-normalize/less/reset-and-normalize'; // LESS @import
```
### License
[Webpack-and-chill](https://github.com/ajzamora/webpack-and-chill) is [MIT licensed](./LICENSE).