Easy React config with Webpack 3 + Babel + webpack-dev-server

Показать описание

Quick and easy yet useful react setup with Webpack v3 and Babel

Source code on github:

Links:

How to setup webpack 2

Рекомендации по теме

Комментарии

Hi Mohamad, Great work!! Thanks for this.

lucasgeorgeshelal

Hi Mohamad Rajabifard, its very helpful tutorial. but i'm just curious why this message "Content not from webpack is served" always show up when we do yarn start for webpack-dev-server, could you explain more?thank you

tamarusa

Can you make Webpaker 3 with Angular please ...

LiaAdzumi

Great screencast Mohammad. How did you learn so much about programming at such a young age? When did you start learning?

mystickid

cool man, this only tutorial works, i mean the other looks like deprecated or the webpack has been updated, so there is so many error those tutorial, but your tutorial is works. much of thanks

AdityaWirahaHadiS

Rocking tutorial! It really helped with WebPack 3 configuration with Babel and React. I also like how you structured it in a step by step way (loading via file browser, .html, react/dom) so you slowly built to a solution. I have to tell you, although WebPack is heavily documented it's not very understandable documentation, and with so many changes with WebPack and Babel, so seeing examples like this really help.

lancerkind

It was really a great tutorial, thanks dear mohammad.

ehsanahmadi

Great job! I hope you add more videos - like 'Webpack 3 - scss loaders'

pawekaniak

Quite impressive that you have such a grasp of these things at 16yrs. Found this easy to follow through and get a feel of the setup. Thank you.

kenyanboy

Informative AND entertaining! Awesome video :)

briantoon

Im having a little problem with a package that I have to publish, may be you can help me, I'm having this error `Uncaught TypeError: is not a function` react_graceful_unmount is the package I published where I'm doing a `export default function` but it seems is not working, do you have some idea of what is happening?

slim_mike

Finally I learned how to config this sttaf

GoldencloudIrhosting

seriously, this is the best tutorial on webpack / babel / react I've found. absolutely smashed it :)

HarryDry

thank you! greetings from venezuela! this was really helpful :)

slim_mike

really helpful tutorial, I followed everything word for word my only issue is my ReactDOM isn't rendering ( basically my html screen and localhost pages show blank but when I right click to view inspect element everything looks good.)

my package .json

{
"name": "project",
"version": "1.0.0",
"description": " simple customer managment aoo",
"main": "app.js",
"scripts": {
"start": "webpack --config webpack.config.js",
"build": "webpack",
"start:dev": "webpack-dev-server"
},
"dependencies": {
"body-parser": "^1.18.2",
"ejs": "^2.5.7",
"express": "^4.16.2",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"author": "me myself and i",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
}

my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<title> React Babel Webpack </title>
</head>
<body>

<div id="root"> </div>
<script src="/bundle.js> </script>
</body>
</html>

my index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (

<div> Hi how are you doing </div>

);

ReactDOM.render(
<App />,

);
...
my webpack.confog.js
const webpack = require('webpack');
const path = require('path');
const config ={

entry: path.resolve('src/index.js'),

output:{
path: path.resolve('dist'),
filename: 'bundle.js'
},

module:{

rules: [
{
test: /.js$/,
loader: 'babel-loader',

}
]
},

devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000

}

};
module.exports = config;

thanks

Massiveheat

Easy React config with Webpack 3 + Babel + webpack-dev-server

Easy React config with Webpack 3 + Babel + webpack-dev-server

React Webpack Setup From Scratch

Manual Webpack Configuration For React App - Basic Setup

Webpack 5 Crash Course | Frontend Development Setup

React Webpack w/ Typescript (Custom Config)

How To Create A React App With React 18, Webpack 5, And Babel (2023 Update)

React Tutorial #2 - Setup with Webpack (& without)

React Webpack-5 Setup from Scratch

How to create and publish React component as NPM Package

CRA Customization Made Easy - Learn How with CRACO | Create React App Configuration Override |

Trying webpack with React.js

1. React Js with Webpack and Babel. Customized React App Configuration.

webpack react | webpack dev server react #webpack #reactapp #reactjs

Create a React App WITHOUT Create React App

Understanding the Complexity of Modern Web Dev Stack (Webpack, Babel, TypeScript, React)

webpack typescript | webpack typescript react | webpack react #webpack #reactjs #typescript

React JS - Webpack Sass Config

[Live Coding] Setup/Build Springboot + React using Webpack in easy steps! (2020)

Webpack 2 - How to install React and Babel

How to Improve Performance in React with Code Splitting

Create a React App with TypeScript and Webpack

Vite in 100 Seconds

React & Typescript - #2 Webpack Setup

Customize your Nx React Webpack config with ease! #shorts