├── .babelrc ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── src ├── component │ └── App.js ├── index.html └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

React-webpack-boilerplate
3 | 4 | 5 |

6 |
7 | 8 | ## 👉 FEATURES 9 | 10 | - Build React App using Babel and WebPack 11 | - Hot Reload 12 | 13 | ## INSTALLATION 14 | 15 | ``` 16 | git clone https://github.com/saadhaxxan/React-webpack-boilerplate.git 17 | cd React-webpack-boilerplate 18 | npm install 19 | npm start 20 | ``` 21 | 22 | ## For Production 23 | ``` 24 | npm build 25 | ``` 26 | 27 | ## Author 28 | You can get in touch with me on my LinkedIn Profile: 29 | 30 | #### Saad Hassan 31 | [![LinkedIn Link](https://img.shields.io/badge/Connect-saadhaxxan-blue.svg?logo=linkedin&longCache=true&style=social&label=Connect 32 | )](https://www.linkedin.com/in/saadhaxxan) 33 | 34 | You can also follow my GitHub Profile to stay updated about my latest projects: [![GitHub Follow](https://img.shields.io/badge/Connect-saadhaxxan-blue.svg?logo=Github&longCache=true&style=social&label=Follow)](https://github.com/saadhaxxan) 35 | 36 | If you liked the repo then kindly support it by giving it a star ⭐! 37 | 38 | If you find any bug in the code or have any improvements in mind then feel free to generate a pull request. 39 | 40 | ## LICENSE 41 | - MIT 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-webpack", 3 | "version": "1.0.0", 4 | "description": "Bulding React app with WebPack no CLI needed", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development --open --hot", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [ 11 | "react-webpack" 12 | ], 13 | "author": "Saad Hassan", 14 | "license": "MIT", 15 | "dependencies": { 16 | "css-loader": "^4.3.0", 17 | "react": "^16.13.1", 18 | "react-dom": "^16.13.1", 19 | "style-loader": "^1.2.1" 20 | }, 21 | "devDependencies": { 22 | "babel-core": "^6.26.3", 23 | "babel-loader": "^7.1.5", 24 | "babel-preset-env": "^1.7.0", 25 | "babel-preset-react": "^6.24.1", 26 | "html-webpack-plugin": "^4.4.1", 27 | "webpack": "^4.44.1", 28 | "webpack-cli": "^3.3.12", 29 | "webpack-dev-server": "^3.11.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/component/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class App extends Component { 4 | 5 | render() { 6 | return ( 7 |
8 |

My React App

9 |
10 | ) 11 | } 12 | 13 | } 14 | 15 | export default App; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My React App 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './component/app'; 4 | 5 | ReactDOM.render(,document.getElementById('app')) -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | 6 | entry : './src/index.js', 7 | output: { 8 | path : path.join(__dirname,'/dist'), 9 | filename : 'bundle.js' 10 | }, 11 | module: { 12 | rules:[ 13 | { 14 | test: /\.js?$/, 15 | exclude: path.join(__dirname, '/node_modules'), 16 | use:{ 17 | loader: 'babel-loader' 18 | } 19 | }, 20 | { 21 | test: /\.css?$/, 22 | use: ['style-loader', 'css-loader'], 23 | }, 24 | ] 25 | }, 26 | plugins: [ 27 | new HtmlWebpackPlugin({ 28 | template:'./src/index.html' 29 | }) 30 | ] 31 | } --------------------------------------------------------------------------------