📦 webpack Boilerplate

An opinionated starter kit using Webpack 5, SCSS, PostCSS, Browsersync & Babel.

Installation

[email protected]:flex2016/Webpack-5-Starter.git my-project
cd my-project
npm i

Usage

Development server

npm run dev

You can view the development server at localhost:8080.

You can view the development BrowserSync server at localhost:3000.

You can view the development BrowserSync server setting at localhost:3001.

Production build

npm run build

Features

Features

• webpack
• Babel
• Sass
• PostCSS
• Browsersync for live reload and responsive design/development.

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 defaults for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
• node-sass - Node 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

Plugins

• Auto Prefixer - Vendor prefixes by Browser
• CSS Nano- Minifies Css
• 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

Author

• Taras Kurilo

License

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