📦📦📦📦📦 webpack Boilerplate

Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.

Requirements

• node >= 10.13.0
• yarn or npm

Installation

Clone this repo and npm install.

yarn install

Usage

Development server

yarn run start

You can view the development server at localhost:8080.

Production build

yarn run build

Note: Install http-server globally to deploy a simple server.

yarn add http-server

You can view the deploy by creating a server in dist.

cd dist && http-server

Update package.json

yarn run check

ESLint check

yarn run lint

TS check

yarn run ts-check

Fix code style with prettier

yarn run fix-code-style 

Features

• webpack
• Babel
• Sass
• PostCSS

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel
• @babel/plugin-proposal-optional-chaining - Transform optional chaining operators into a series of nil checks
• @babel/plugin-transform-regenerator - Explode async and generator functions into a state machine.
• @babel/plugin-transform-runtime - Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • sass - Dart Sass
• postcss-loader - Process CSS with PostCSS
  • postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM
• ts-loader - typescript support
• svg-sprite-loader - generate svg sprites
• svgo-loader - optimisation for svg images
• pug-loader - pug template engine

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets

Linters

• eslint - Enforce styleguide across application
• eslint-config-airbnb-base - Base styleguide to enforce rules
• eslint-config-prettier - Implment prettier rules
• eslint-plugin-import - Implment import rules
• eslint-plugin-prettier - Dependency for prettier usage with ESLint
• eslint-import-resolver-webpack - Throw exceptions for import/export in webpack
• eslint-webpack-plugin - ESLint configuration for webpack
• prettier - Dependency for prettier-webpack-plugin plugin
• prettier-webpack-plugin - Prettier configuration for webpack

Libs

• jQuery,
• Fancybox,
• OwlCarousel,
• FlexSlider,
• jquery-selectric,
• jquery.maskedinput,
• NoUiSlider
• WebComponentsJs

Author

• Mickle Goriachkin (abaddonGIT)

License

This project is open source and available under the MIT License.