My React App

├── .babelrc ├── src ├── assets │ ├── dog.jpg │ └── webpack_babel.png ├── index.css ├── index.html └── index.js ├── README.md ├── .gitignore ├── package.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["@babel/preset-env", "@babel/preset-react"] } 2 | -------------------------------------------------------------------------------- /src/assets/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grangier/webpack-react-starter/master/src/assets/dog.jpg -------------------------------------------------------------------------------- /src/assets/webpack_babel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/grangier/webpack-react-starter/master/src/assets/webpack_babel.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 50; 3 | padding: 50; 4 | } 5 | 6 | div { 7 | background-color: teal; 8 | } 9 | 10 | img { 11 | width: 640px; 12 | height: 426px; 13 | } 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A Complete Webpack Setup for React 2 | 3 | ![Alt Webpack + Babel + React](/src/assets/webpack_babel.png) 4 | 5 | Detailed instructions available in my Medium Post: 6 | 7 | https://medium.com/swlh/a-complete-webpack-setup-for-react-e56a2edf78ae 8 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My React App 8 | 9 | 10 |

11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Don't commit system files or dependencies 2 | *.DS_Store 3 | node_modules/ 4 | 5 | # Jekyll 6 | _site 7 | .jekyll-metadata 8 | /.bundle 9 | /vendor 10 | /dist 11 | /.tmp 12 | 13 | # Logfiles and tempfiles 14 | *.log 15 | /log/* 16 | !/log/.keep 17 | /tmp 18 | 19 | # Other unneeded files 20 | doc/ 21 | *.swp 22 | *~ 23 | .project 24 | .DS_Store 25 | .idea 26 | .secret 27 | 28 | 29 | node_modules 30 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import MyImage from './assets/dog.jpg'; 5 | import './index.css'; 6 | 7 | const App = () => { 8 | return ( 9 |

10 |

Welcome to my-webpack-react-starter

11 |

12 |

13 | ); 14 | }; 15 | 16 | ReactDOM.render(, document.querySelector("#root")); 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-react-starter", 3 | "version": "1.0.0", 4 | "description": "A Webpack + Babel + React Starter bolerplate ", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/mlomboglia/webpack-react-starter" 8 | }, 9 | "keywords": [ 10 | "Autoprefixer", 11 | "PostCSS", 12 | "Webpack", 13 | "React", 14 | "Babel" 15 | ], 16 | "author": "Marcos Lomboglia (https://marcoslombog.com)", 17 | "main": "index.js", 18 | "scripts": { 19 | "test": "echo \"Error: no test specified\" && exit 1", 20 | "start": "webpack-dev-server --open --hot --mode development", 21 | "build": "webpack --mode production" 22 | }, 23 | "license": "MIT", 24 | "browserslist": "> 1%,last 2 versions", 25 | "devDependencies": { 26 | "@babel/core": "^7.7.5", 27 | "@babel/preset-env": "^7.7.6", 28 | "@babel/preset-react": "^7.7.4", 29 | "autoprefixer": "^9.7.3", 30 | "babel-loader": "^8.0.6", 31 | "css-loader": "^3.4.2", 32 | "file-loader": "^5.0.2", 33 | "html-webpack-plugin": "^3.2.0", 34 | "postcss-loader": "^3.0.0", 35 | "style-loader": "^1.0.1", 36 | "url-loader": "^3.0.0", 37 | "webpack": "^4.41.3", 38 | "webpack-cli": "^3.3.10", 39 | "webpack-dev-server": "^3.9.0" 40 | }, 41 | "dependencies": { 42 | "react": "^16.12.0", 43 | "react-dom": "^16.12.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const autoprefixer = require('autoprefixer'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/index.js', 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), 9 | filename: 'bundle.js', 10 | chunkFilename: '[id].js', 11 | publicPath: '' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.jsx'] 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.js$/, 20 | loader: 'babel-loader', 21 | exclude: /node_modules/ 22 | }, 23 | { 24 | test: /\.css$/, 25 | exclude: /node_modules/, 26 | use: [ 27 | { loader: 'style-loader' }, 28 | { 29 | loader: 'css-loader', 30 | options: { 31 | modules: { 32 | localIdentName: "[name]__[local]___[hash:base64:5]", 33 | }, 34 | sourceMap: true 35 | } 36 | }, 37 | { 38 | loader: 'postcss-loader', 39 | options: { 40 | ident: 'postcss', 41 | plugins: () => [ 42 | autoprefixer({}) 43 | ] 44 | } 45 | } 46 | ] 47 | }, 48 | { 49 | test: /\.(png|jpe?g|gif)$/, 50 | loader: 'url-loader?limit=10000&name=img/[name].[ext]' 51 | } 52 | ] 53 | }, 54 | plugins: [ 55 | new HtmlWebpackPlugin({ 56 | template: __dirname + '/src/index.html', 57 | filename: 'index.html', 58 | inject: 'body' 59 | }) 60 | ] 61 | }; --------------------------------------------------------------------------------