├── .babelrc ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── .travis.yml ├── README.md ├── dist └── index.html ├── package-lock.json ├── package.json ├── sandbox.config.json ├── src ├── App.js └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: rwieruch 4 | patreon: # rwieruch 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with a single custom sponsorship URL 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "singleQuote": true, 4 | "printWidth": 70 5 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - stable 5 | 6 | install: 7 | - npm install 8 | 9 | script: 10 | - npm test -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # minimal-react-webpack-babel-setup 2 | 3 | [![Build Status](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-setup.svg?branch=master)](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-setup) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/minimal-react-webpack-babel-setup.svg)](https://greenkeeper.io/) 4 | 5 | Read how to set it up yourself: [React with Webpack Tutorial](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/). 6 | 7 | [![Edit minimal-react-webpack-babel-setup](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/rwieruch/minimal-react-webpack-babel-setup/tree/master/?fontsize=14) 8 | 9 | ## Features 10 | 11 | - React 16 12 | - Webpack 5 13 | - Babel 7 14 | - Hot Module Replacement 15 | 16 | ## DIY Add-Ons 17 | 18 | - [ESLint](https://www.robinwieruch.de/react-eslint-webpack-babel/) 19 | - [CSS Modules](https://www.robinwieruch.de/react-css-modules/) 20 | - [SVG Icons](https://www.robinwieruch.de/react-svg-icon-components/) 21 | - [Fonts Support](https://www.robinwieruch.de/webpack-font/) 22 | - [Images Support](https://www.robinwieruch.de/webpack-images/) 23 | - [Docker](https://www.robinwieruch.de/docker-react-development) 24 | 25 | ## Alternatives 26 | 27 | - [Advanced React Webpack Babel Setup](https://github.com/rwieruch/advanced-react-webpack-babel-setup) via this [Tutorial](https://www.robinwieruch.de/webpack-advanced-setup-tutorial) 28 | 29 | ## Installation 30 | 31 | - `git clone git@github.com:rwieruch/minimal-react-webpack-babel-setup.git` 32 | - cd minimal-react-webpack-babel-setup 33 | - npm install 34 | - npm start 35 | - visit `http://localhost:8080/` 36 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Minimal React Webpack Babel Setup 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "minimal-react-webpack-babel-setup", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack serve --config ./webpack.config.js --mode development", 8 | "test": "echo \"No test specified\" && exit 0" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/core": "^7.17.2", 15 | "@babel/preset-env": "^7.16.11", 16 | "@babel/preset-react": "^7.16.7", 17 | "babel-loader": "^8.2.3", 18 | "react-hot-loader": "^4.13.0", 19 | "webpack": "^5.68.0", 20 | "webpack-cli": "^4.9.2", 21 | "webpack-dev-server": "^4.7.4" 22 | }, 23 | "dependencies": { 24 | "react": "^17.0.2", 25 | "react-dom": "^17.0.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": "node" 3 | } 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const App = ({ title }) =>
{title}
; 4 | 5 | export default App; 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | const title = 'My Minimal React Webpack Babel Setup'; 7 | 8 | ReactDOM.render( 9 | , 10 | document.getElementById('app') 11 | ); 12 | 13 | module.hot.accept(); 14 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: path.resolve(__dirname, './src/index.js'), 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.(js|jsx)$/, 10 | exclude: /node_modules/, 11 | use: ['babel-loader'], 12 | }, 13 | ], 14 | }, 15 | resolve: { 16 | extensions: ['*', '.js', '.jsx'], 17 | }, 18 | output: { 19 | path: path.resolve(__dirname, './dist'), 20 | filename: 'bundle.js', 21 | }, 22 | plugins: [new webpack.HotModuleReplacementPlugin()], 23 | devServer: { 24 | static: path.resolve(__dirname, './dist'), 25 | hot: true, 26 | }, 27 | }; 28 | --------------------------------------------------------------------------------