Webpack 5 Boilerplate

Webpack 5 boilerplate with a configuration that helps a multiple-page application.

Installation

Clone the repo and run npm install in your terminal

npm install

Usage

There are two modes in the configuration: development and production, and each mode have three commands for building, running dev-server, and doing the both process (build and dev-server) in parallel.

---

Development

• Building

    npm run dev

• Starting dev-server

    npm run start:server-dev

• Building and Starting dev-server

    npm start

---

Production

• Building

    npm run prod

• Starting dev-server

    npm run start:server-prod

• Building and Starting dev-server

    npm run start:prod

---

Ingredients

• webpack
• Babel
• PostCSS
• ESLint
• PUG
• SASS
• Prettier

Dependencies

webpack

• Core

  • webpack - Webpack is a module bundler.

  • webpack-cli - Webpack's Command Line Interface.

  • webpack-dev-server - Serves a webpack app.

• Plugins

  • css-minimizer-webpack-plugin - optimize and minify your CSS.

  • mini-css-extract-plugin - Lightweight CSS extraction plugin.

  • eslint-webpack-plugin - This plugin uses eslint to find and fix problems in your JavaScript code

  • html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles.

• Loaders

  • babel-loader - This package allows transpiling JavaScript files using Babel and webpack.

  • css-loader - The css-loader interprets @import and url() like import/require() and will resolve them.

  • postcss-loader - Loader to process CSS with PostCSS.

  • sass-loader - Loads a Sass/SCSS file and compiles it to CSS.

  • simple-pug-loader - Pug template loader for webpack that's better and more straight forward than the original.

  • style-loader - Inject CSS into the DOM.

  • csv-loader - A webpack module to intelligently load csv files

ESLint

• eslint - Find and fix problems in your JavaScript code.

• eslint-config-airbnb-base - JavaScript Style Guide.

• eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.

• eslint-plugin-prettier - Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

PostCSS

• postcss-rtlcss - PostCSS plugin to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules using RTLCSS

• autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use.

• postcss-purgecss - PurgeCSS is a tool to remove unused CSS.

Pug

• pug - Pug – robust, elegant, feature rich template engine for Node.js

SASS

• dart-sass - Sass is a stylesheet language that’s compiled to CSS.