A starter frontend boilerplate using Webpack 5, SASS, PostCSS, Babel, ESLint, Stylelint, Prettier and more.
- Latest Webpack 5.
- Separated Webpack configurations per environment:
developmentorproduction. - 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
.envfile 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,svgfilesize 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 startRuns 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 buildBuilds the app for production to the dist folder.
The build is minified and the filenames include hashes.
npm run lintRuns both SASS and Javascript code linters.
npm run css-lintnpm run js-lintnpm run prettier:formatRuns code formatting with Prettier.
npm run analyzeBuilds 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:>=18npm:>=8