Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/persteenolsen/webpack-5-react-boilerplate

A Webpack 5 boilerplate with Babel React and PostCSS
https://github.com/persteenolsen/webpack-5-react-boilerplate

babel es6 postcss react webpack

Last synced: about 3 hours ago
JSON representation

A Webpack 5 boilerplate with Babel React and PostCSS

Host: GitHub
URL: https://github.com/persteenolsen/webpack-5-react-boilerplate
Owner: persteenolsen
Created: 2021-02-04T12:01:20.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2023-10-10T11:00:14.000Z (about 1 year ago)
Last Synced: 2024-04-17T05:06:02.777Z (7 months ago)
Topics: babel, es6, postcss, react, webpack
Language: JavaScript
Homepage: https://webpack5react.persteenolsen.com/
Size: 350 KB
Stars: 4
Watchers: 3
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Webpack 5 React Boilerplate

Webpack 5 boilerplate using React, Babel 7, PostCSS and Sass with a hot dev server and an optimized production build. Babel compiles ES6+ and React to ES5. 

# Usage

# Installing

- Make sure you have a new version of Node installed

- Download the code by zip or fork

- Run the command npm install by the command promt

# Development server:

- npm run start

- You can view the development server at `localhost:8080`.

# Production build:

- npm run build

# To view the build use http-server:

- npm run prod

# Features

- [webpack](https://webpack.js.org/)

- [React](https://reactjs.org/)

- [Babel](https://babeljs.io/)

- [Sass](https://sass-lang.com/)

- [PostCSS](https://postcss.org/)

# Dependencies 

# React

- [`react`](https://www.npmjs.com/package/react) - React is a JavaScript library for creating user interfaces. For creating React components.

- [`react-dom`](https://www.npmjs.com/package/react-dom) - This package serves as the entry point to the DOM and server renderers for React. 

- [`react-router-dom`](https://www.npmjs.com/package/react-router-dom) - This package serves as DOM for React Router. 

- [`react-hook-form`](https://www.npmjs.com/package/react-hook-form) - Forms in Reack. 

# Babel

- [`@babel-runtime`](https://babeljs.io/docs/en/babel-runtime) - Babel Runtime for dev babel/plugin-transform-runtime.

# Other 

- [`core-js`](https://www.npmjs.com/package/core-js) - Main Library with polyfills for older Browsers

- [`whatwg-fetch`](https://www.npmjs.com/package/whatwg-fetch) - For making promise based web request progammitically

#  devDependencies

# webpack

- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.

- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack

- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack

- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify dev/prod configuration

# Loaders

- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files - Babel/webpack

- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS

- [`node-sass`](https://github.com/sass/node-sass) - Node Sass

- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS

- [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Default for PostCSS

- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports

- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM

# Babel

- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to ES5

- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel

- [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) - Defaults Babel React

- [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime) - Babel to use async/await

- [`@babel/plugin-proposal-object-rest-spread`](https://babeljs.io/docs/en/plugin-proposal-object-rest-spread) - Babel helper

- [`@babel/plugin-transform-arrow-functions`](https://babeljs.io/docs/en/plugin-transform-arrow-functions) - For arrow functions

- [`@babel/plugin-transform-async-to-generator`](https://babeljs.io/docs/en/plugin-transform-async-to-generator) - Generator for async/await

- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties on a class

# Plugins

- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders

- [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory

- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template

- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files

- [`css-minimizer-webpack-plugin`](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) - Optimize and minimize CSS assets

- [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration

- [`path`](https://www.npmjs.com/package/path) - Node Path moule

- [`http-server`](https://www.npmjs.com/package/http-server) - HTTP server for testing the produktion build by running npm run prod

# Author

- Per Olsen

# License

This project is open source and available under the [MIT License](LICENSE).