A starter frontend boilerplate using Webpack 5, SASS, PostCSS, Babel, ESLint, Stylelint, Prettier and more.

• Latest Webpack 5.
• Separated Webpack configurations per environment: development or production.
• Fully configured Webpack Dev Server for local development with Hot Module Replacement enabled.
• HTML file to serve your webpack bundles with html-webpack-plugin.
• Copy files to build directory with copy-webpack-plugin.
• Load environment variables from a .env file with dotenv-webpack.
• Analyze output files with an interactive zoomable treemap with Webpack Bundle Analyzer.

• Babel 7 - JavaScript compiler with babel-preset-env.

• SASS support based on dart-sass.
• PostCSS setup with post-preset-env, including autoprefixing of browserspecific CSS rules.
• Remove unused CSS with PurgeCSS.

• JavaScript Linting with eslint.
• Style Linting with stylelint: stylelint-config-standard-scss, stylelint-config-recess-order.
• Automatic code formatting with Prettier.

• Image optimisation - optimize jpeg, jpg, png, gif, svg filesize with imagemin.
• Optimize and minimize CSS assets with CssMinimizerWebpackPlugin.

• Configurable browsers versions support via browserslist.
• Git hooks with Husky.
• Lint commit messages with Commitlint.
• Run linters against staged git files with lint-staged.

npm start

Runs the app in the development mode with hot reloading enabled.
Open http://localhost:8080 or server port specified in your .env file to view it in your browser.

npm run build

Builds the app for production to the dist folder.
The build is minified and the filenames include hashes.

npm run lint

Runs both SASS and Javascript code linters.

npm run css-lint

npm run js-lint

npm run prettier:format

Runs code formatting with Prettier.

npm run analyze

Builds the app for production and creates an interactive treemap visualization of the contents of all your bundles.
It will start an HTTP server on the default configuration URL localhost:8888 to show bundle report.

• node: >=18
• npm: >=8