React Webpack Babel Setup From Scatch - 2020 React.js Tutorial 

Glad I could help!

@@letscode7478 Just had some issues with sass and css, it required resolve-url-loader", also im not shure does your example with that mini css plugin is minifying the css?

@@daliborpetric8288 The mini-css-extract-plugin doesn't minify the css it just separates it out into a css file.

Awesome, thank you!

Thanks, not sure why those version of webpack don't work with the dev server but thanks for the info.

Glad it helped

Glad it was helpful!

The only reason I am not using a style loader in this video is just to show one possibility of having your CSS/SCSS outside of your JavaScript. You can of course still use style loader I was just trying to give an example of how customizable webpack is.

Glad it was helpful!

Thanks!

Good question, that was actually a mistake. react and react-dom shouldn't be dev dependancies, I think I was just typing -D out of habit.

No problem!

Thanks for finding that issue

I've found a workaround by downgrading the webpack-dev-server to 3.11

Glad you enjoyed it!

and you could save your time posting a video yourself instead of talking shit on someone else's video?

Thanks, will do!

Great to hear! Hope you find it helpful.

Thanks really appreciate it!

@@letscode7478 by the way I ve tryed to build with react router and the routing in the build does not work all though it's working fine in development. Any ideas? I guess it should be webpak :)

I'm assuming that after you built it you opened the index.html file. That probably wont work. You will need actually start a server. To do this run "npm I -g serve" this will install this npm package www.npmjs.com/package/serve. Then to serve the build just run this command in your terminal "serve " where build folder name is what you set your build folder to be called. Then in the terminal you will see something like "Accepting connections on localhost:5000" just go to localhost:5000 and your build should be there. Another point that I forgot to mention in the video was publicPath: "/" not sure if this will affect the build, example output: { path: path.resolve(__dirname, "build"), filename: "bundle.js", publicPath: "/" }, Hope that helps

@@letscode7478 ok thank you so much for your answer, I will try and I will let you know!!! 😊

Yes it was that haha I am so stupid!!! Thanx again!!!!!!!

Glad you like it!

create-react-app sets up the entire environment for you, it handles the webpack configuration, the babel presets, loaders etc. Which is good for getting started since you dont have to concern yourself with this. However purpose of doing this from scratch is the customization that you have. You can chose what sort of loaders you want to use, how your files are built and where, what babel presets you want to you, typescript configuration, etc. For example we were able to use SASS because we chose to use loaders that could handle SASS files, another example was setting environment variables in our scripts inside the package.json. There is a lot more that you can do with webpack and babel, but for the beginners what I showed in the video is a good starting point. And hopefully I made it clear how to use new loaders, so if you find yourself in a situation where you want to handle some sort of file, e.g. CSV, then you can do a bit of googling to find a CSV loader and add that to your webpack configuration.

@@letscode7478 Thank you for the explanation.