🌐 Webpack ES6 Boilerplate

Minimal webpack 5 boilerplate using Babel, Sass with a hot dev server and a production build.

Prerequisites

• Node.js
• Yarn

Getting Started

Installation

git clone https://github.com/Seogeurim/webpack-es6-boilerplate.git
cd webpack-es6-boilerplate
yarn install

Development server

Webpack dev server runs at localhost:8000.

yarn run dev

Production build

Build outputs are created in dist.

yarn run build

Features

• webpack
• Babel
• Sass

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

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/preset-env - Smart preset for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • sass - A pure JavaScript implementation of Sass
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extracts CSS file per JS file which contains CSS

Linters

• eslint - Enforce styleguide across application
• eslint-config-airbnb-base - Base JS styleguide of Airbnb
• eslint-config-prettier - Implment prettier rules
• eslint-plugin-import - Implment import rules
• eslint-plugin-prettier - Dependency for prettier usage with ESLint
• prettier - code formatter

License

This project is licensed under the MIT License.