https://github.com/rwieruch/advanced-react-webpack-babel-setup

The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?
https://github.com/rwieruch/advanced-react-webpack-babel-setup

babel boilerplate-react react webpack

Last synced: 5 days ago
JSON representation

The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?

• Host: GitHub
• URL: https://github.com/rwieruch/advanced-react-webpack-babel-setup
• Owner: rwieruch
• Created: 2019-06-25T12:19:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-01T09:02:49.000Z (about 4 years ago)
• Last Synced: 2024-10-24T03:25:22.211Z (12 days ago)
• Topics: babel, boilerplate-react, react, webpack
• Language: JavaScript
• Homepage: https://www.robinwieruch.de
• Size: 1.16 MB
• Stars: 191
• Watchers: 14
• Forks: 57
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# advanced-react-webpack-babel-setup

[![Build Status](https://travis-ci.org/rwieruch/advanced-react-webpack-babel-setup.svg?branch=master)](https://travis-ci.org/rwieruch/advanced-react-webpack-babel-setup) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/advanced-react-webpack-babel-setup.svg)](https://greenkeeper.io/)

Advanced React with Webpack Setup. How to set it up yourself:

- [Minimal React + Webpack Setup](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/)

- [Advanced Webpack Setup](https://www.robinwieruch.de/webpack-advanced-setup-tutorial/)

- [ESLint](https://www.robinwieruch.de/webpack-eslint/) + [ESLint + React](https://www.robinwieruch.de/react-eslint-webpack-babel/) + [Prettier + ESLint](https://www.robinwieruch.de/prettier-eslint/)

[![Edit advanced-react-webpack-babel-setup](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/rwieruch/advanced-react-webpack-babel-setup/tree/master/?fontsize=14)

## Features

- React 16

- Webpack 5

- Babel 7

- Hot Module Replacement

- Dev + Production Builds

- Dist Folder Managagement by Webpack

- Common and environment specific Webpack Configuration

- Composition of Webpack Configuration

- Source Maps

- Environment Variables

- Webpack Add-Ons

- ESLint + Prettier

## DIY Add-Ons

- [SVG Icons](https://www.robinwieruch.de/react-svg-icon-components/)

- [CSS Modules](https://www.robinwieruch.de/react-css-modules/)

- [Fonts Support](https://www.robinwieruch.de/webpack-font/)

- [Images Support](https://www.robinwieruch.de/webpack-images/)

- [Docker](https://www.robinwieruch.de/docker-react-development)

## Alternatives

- [Minimal React Webpack Babel Setup](https://github.com/rwieruch/minimal-react-webpack-babel-setup)

## Installation

- `git clone [email protected]:rwieruch/advanced-react-webpack-babel-setup.git`

- cd advanced-react-webpack-babel-setup

- npm install

- npm start

- visit `http://localhost:8080/`