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):

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:

• built-in css-reset-and-normalize for cross-browser compatibility (NEW)
• cache busting (hashing system)
• refactoring codes instantly (uglify or minify)
• chunking and bundling --
• other plugins used for optimization: mini-css-extract-plugin, optimize-css-assets-webpack-plugin, clean-webpack-plugin
• 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 and implemented with JavaScript for Node.js 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, it has comments.

Why use it?: Here's an article about Reboot, Resets and 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):

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:

• built-in css-reset-and-normalize for cross-browser compatibility (NEW)
• cache busting (hashing system)
• refactoring codes instantly (uglify or minify)
• chunking and bundling --
• other plugins used for optimization: mini-css-extract-plugin, optimize-css-assets-webpack-plugin, clean-webpack-plugin
• 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 and implemented with JavaScript for Node.js 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, it has comments.

Why use it?: Here's an article about Reboot, Resets and Reasoning by Chris Coyier.

usage:

<link rel="stylesheet" href="path/to/reset-and-normalize.min.css">                  // HTML <link>`  
@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 is MIT licensed.