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.
git clone https://github.com/tomik23/webpack-boilerplate.git
cd webpack-boilerplate
npm i
npm run dev
npm run prod
webpack
- Module and asset bundlerwebpack-cli
- Command line interface for Webpackwebpack-dev-server
- Development server for Webpackwebpack-merge
- Simplify development and production configurationcross-env
- Cross platform configuration
@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 codeeslint:recommended
- An extends property value "eslint:recommended" enables a subset of core rules that report common problemseslint-config-prettier
- Turns off all rules that are unnecessary or might conflict with Prettiereslint-plugin-html
An ESLint plugin to extract and lint scripts from HTML fileseslint-plugin-import
ESLint plugin with rules that help validate proper importseslint-plugin-prettier
ESLint plugin for Prettier formatting
core-js
- Modular standard library for JavaScript, includes many polyfills
babel-loader
- Transpile files with Babel and Webpacksass-loader
- Load SCSS and compile to CSSsass-resources-loader
- @import your SASS resources into every required SASS modulenode-sass
- Node Sasspostcss-loader
- Process CSS with PostCSScssnano
- Optimize and compress PostCSSautoprefixer
- Parse CSS and add vendor prefixes
css-loader
- Resolves CSS imports into JSpug-loader
- Pug loader templatestyle-loader
- Inject CSS into the DOMfile-loader
- Copy files to build folder
html-webpack-plugin
- Generate HTML files from template in our case pugclean-webpack-plugin
- Remove/clean build folderscopy-webpack-plugin
- Copy files to build directorymini-css-extract-plugin
- Extract CSS into separate filesterser-webpack-plugin
- Minify JavaScriptworkbox-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.
.htaccess
- optimized 100/100 in google https://web.dev/measure/ of course when there are no ads ;)manifest.json
- of course you can use thefavicons-webpack-plugin
that will generate all possible elements in the manifest
This project is open source and available under the MIT License.