React Webpack Setup From Scratch

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

In this tutorial, I’ll show you how to create a React Webpack setup from scratch, using Babel to load JS and JSX files as well as taking care of compiling Sass files.

React Webpack Setup From Scratch
-------------------------------------------------
00:00 Introduction
00:37 Setup
04:46 React Webpack config (React, webpack, babel)
08:27 React Source files
13:17 Starting web pack
16:29 React Webpack production build
17:45 Optimisations / Plugins
20:28 Conclusion

— Follow Me —
— Thanks! —

So in this React Webpack setup tutorial, we’ll be creating a simple React component and demonstrating how this could be rendered in the browser by compiling all of the React and Sass code into a bundle that can be easily used in the browser.

You can obviously setup a React very quickly with other tools but an alternative to create-react-app and similar is to create your own configuration for React Webpack from scratch.

I’ll cover all the dependencies that are necessary to do this in the project and also we’ll look at how to create a React web pack production build so that you have production ready files that you could distribute to your hosting provider.

I will also cover how to have a React web pack SCSS configuration setup to handle you Sass files.

Before wrapping up, I’ll show you how you can add your own plugins and optimisations to your React webpack setup using plugins.

react webpack, react webpack babel 2020, react webpack production build, react webpack setup from scratch, react webpack code splitting, react webpack 2020, react webpack scss, react webpack from scratch, react webpack setup, react, webpack, tutorial, webpack tutorial Channel Handle @codebubb

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

Комментарии

Best tutorial ever I have encountered on this topic! I have been frustrated many nights but this tutorial within one hour laid everything bare for me. I can now take it from here. Thanks.

paulnnamdi

the way you talk through what you're doing is the best i've seen for youtube coding videos imo

michaelcarnevale

absolutely fantastic tutorial. JS feels needlessly complex compared to Rails. I wish JS devs would bake in generators that were more flexible than CRA

Finite

Thanks very much for this tutorial. I am a react learner and this was by far a really good tutorial to get me up and using webpack. It seems like a lot of paid for tutorials have difficulties with webpack configurations. I wont name a couple I have done where everything comes to a halt because the tutorial is out of date for webapck configuration or not configured correctly. I really appreciated your tutorial and really appreciated your clear precise and concise explanations for the files and the code. This is my first time to your channel and I am now a subscriber and I will definitely watch your other videos. Thanks again.

georgecaplan

It's Christmas Eve and I'm going to have a shot for every time he says 'actual' or 'actually' 😵‍💫

martingeldart

Man seriously, thank you. You explain so well.

tomascarignano

Great Video.. Just wanted to add that webpack will run loader in reverse order . Sass-loader converts to css file, which css-loader with turns to javascript and then style-loader will add that to the link tag in our main html file.

ankitmehrotra

Thank you! I've been going through tutorial after tutorial for the past 48 ish hours and wish I initially came across this.

MrSanchezTheDev

Thank you for getting me started on webpack.

sunilprajapat

Awesome.After searching entire day I got the best webpack explaination. Thanks

shreyageek

Thank you for great tutorial,
I would like to mention that the setting for jsx is not working (this will throw an error for the module is not found)
-webpack file need a :
resolve: { extensions: [".js", ".jsx"], }.

- instead of "watchBaseContet" at devServer I added hot: true, open: true

Thanks again :)

reactstack

thanks man, this setup has been killing me! This tutorial ir perfect. My only thing is: under the module.exports, make sure it reads: output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
},
devServer: {
port: 3000,
open: true,
hot: true,
},

Michael-Martell