📦 Webpack Template

Webpack 5 boilerplate using Babel, PostCSS, Sass, Normalize, .

Installation

Clone this repo and npm install.

npm i || yarn

Usage

Development server

npm run serve || yarn serve

You can view the development server at localhost:8080.

Production build

npm run build || yarn build

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

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
• group-css-media-queries-loader - Groups media queries
• xml-loader - Plugin for loading XML files
• csv-loader - Automatically converts data types, making it easy to import and start using data

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
• optimize-css-assets-webpack-plugin - Optimize and minimize CSS assets
• imagemin-webp-webpack-plugin - Compresses and compiles images to WebP
• webpack-bundle-analyzer - Visualizes the size of the output files of the Webpack

Author

• Sergey Kondrashevsky

License

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