Webpack Boilerplate - multiple entry

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

Features

• Webpack v5.88.2
• Babel v7.22.17
• Core-js v3.32.2
• Pug v3.0.2
• Sass v1.66.1
• postcss-preset-env v9.1.3
• ESLint v8.49.0

Clone the repo and install dependencies

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

Usage

Development server

npm run dev

Production build

npm run prod

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-parser - Is a parser that allows ESLint to run on source code that is transformed by Babel.
  • eslint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
  • eslint:recommended - An extends property value "eslint:recommended" enables a subset of core rules that report common problems
  • 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
• postcss-loader - Process CSS with PostCSS
• css-loader - Resolves CSS imports into JS
• pug-loader - Pug loader template
• style-loader - Inject CSS into the DOM
• asset modules replace ral-loader, url-loader, file-loader

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.

Assets

• .htaccess - optimized 100/100 in google https://web.dev/measure/ of course when there are no ads ;)
• manifest.json - of course you can use the favicons-webpack-plugin that will generate all possible elements in the manifest

License

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