oneverest/webpack-boilerplate

🛠 Minimal Webpack 4 boilerplate

Webpack Boilerplate

Minimal Webpack 4 boilerplate with Babel, core-js, Sass, Pug, ESlint and a lot mor. It also includes optimization for development and production build.

Clone the repo and install dependencies

git clone https://github.com/tomik23/webpack-boilerplate.git
cd webpack-boilerplate
npm i

Usage

Development server

npm run dev

Production build

npm run prod

Features

• Webpack
• Babel
• Core-js
• Pug
• Sass
• PostCSS
• ESLint

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 and production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/preset-env - Smart defaults for Babel
• babel-eslint - Lint Babel code
  • eslint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
  • eslint-config-airbnb-base - This package provides Airbnb's base JS
  • https://github.com/prettier/eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier
  • eslint-plugin-html An ESLint plugin to extract and lint scripts from HTML files
  • eslint-plugin-import ESLint plugin with rules that help validate proper imports
  • eslint-plugin-prettier ESLint plugin for Prettier formatting
• core-js - Modular standard library for JavaScript, includes many polyfills

Loaders

• babel-loader - Transpile files with Babel and Webpack
• sass-loader - Load SCSS and compile to CSS
• sass-resources-loader - @import your SASS resources into every required SASS module
• node-sass - Node Sass
• postcss-loader - Process CSS with PostCSS
  • cssnano - Optimize and compress PostCSS
  • autoprefixer - Parse CSS and add vendor prefixes
• css-loader - Resolves CSS imports into JS
• pug-loader - Pug loader template
• style-loader - Inject CSS into the DOM
• file-loader - Copy files to build folder

Plugins

• html-webpack-plugin - Generate HTML files from template in our case pug
• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• mini-css-extract-plugin - Extract CSS into separate files
• terser-webpack-plugin - Minify JavaScript
• workbox-webpack-plugin - Workbox provides two webpack plugins: one that generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file.

License

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