React Webpack Setup From Scratch

No video

React Webpack Setup From Scratch

Рет қаралды 59,257

Күн бұрын

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.
Completed code on GitHub: github.com/cod...
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 -
Twitter: / codebubb
Facebook: / juniordevelopercentral
Blog: www.juniordeve...
- 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

Пікірлер: 133

@michaelcarnevale5620 3 жыл бұрын

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

@codewithbubb 3 жыл бұрын

Ah, thanks very much Michael - appreciate the feedback 😀

@paulnnamdi4098 2 жыл бұрын

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.

@codewithbubb 2 жыл бұрын

Cheers Paul! Glad it helped you out!

@georgecaplan11 3 жыл бұрын

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.

@codewithbubb 3 жыл бұрын

Ah, thank you so much for your feedback George! Yes, that's the problem with some technologies - they get updated and become out of date so quickly. Glad you enjoyed the tutorial and glad to have you with us!

@reactstack257 2 жыл бұрын

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 :)

@Finite8614 2 жыл бұрын

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

@codewithbubb 2 жыл бұрын

Cheers! Appreciate your support!

@martingeldart386 Жыл бұрын

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

@codewithbubb Жыл бұрын

Enjoy! 🍻

@tomascarignano5002 2 жыл бұрын

Man seriously, thank you. You explain so well.

@codewithbubb 2 жыл бұрын

You're welcome 😀

@ankitmehrotra8519 3 жыл бұрын

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.

@shreyageek 2 жыл бұрын

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

@coolme7437 7 ай бұрын

Thanks for creating this tutorial

@codewithbubb 7 ай бұрын

No probs. Might be a bit out of date now...

@sunilprajapat3660 3 жыл бұрын

Thank you for getting me started on webpack.

@codewithbubb 3 жыл бұрын

No problem Sunil, it can be quite confusing at first. Are you building something with React?

@sunilprajapat3660 3 жыл бұрын

@@codewithbubb Yes I am learning React right now

@Michael-Martell 2 жыл бұрын

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, },

@codewithbubb 2 жыл бұрын

Great, thanks for the feedback 👍

@MrSanchezTheDev 3 жыл бұрын

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

@brunofilgueiras3518 3 жыл бұрын

man, what a clean explanation thanks buddy

@codewithbubb 3 жыл бұрын

Cheers Bruno 😀

@mrigankabora4835 3 жыл бұрын

Everything crystal clear... awesome work❤️

@codewithbubb 3 жыл бұрын

Thank you very much 😀

@lucachang4178 2 жыл бұрын

awesome video! it's life saving, wish there could be more videos like this

@codewithbubb 2 жыл бұрын

Wow! Thanks Luca! Appreciate the feedback 👍

@joshuadavis3879 3 жыл бұрын

Clear and concise. Thank you!

@surajdedhia9584 2 жыл бұрын

Thank you Sir. Really useful tutorial it was 😀

@codewithbubb 2 жыл бұрын

You're welcome 😀

@teodorcristiansolca7653 3 жыл бұрын

Thank you very much! I think this is the best video on webpack so far 👍

@J6Snipe 3 жыл бұрын

Thanks James! Exactly what I was looking for

@codewithbubb 3 жыл бұрын

Thanks Jade, glad it helped you out! Are you building anything exciting?

@nareshgotte2251 2 жыл бұрын

Best video of webpack

@thewishmastur Жыл бұрын

Excellent tutorial. Thank you

@codewithbubb Жыл бұрын

Glad it was helpful! What are you learning next?

@philipkoller5173 Жыл бұрын

For watchContentBase error just takeout the entire property as it is already enabled by default in newer versions of webpack devServer: { port: 3010, },

@indrasen9617 2 жыл бұрын

replace watchContentBase with static if you get this error : "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema."

@m.alvyekafauzi6594 Жыл бұрын

best tutorial, thanks codebudd!

@potionsmeller313 2 жыл бұрын

beautifully explained, thank you

@codewithbubb 2 жыл бұрын

Thanks very much!

@historymobile6210 3 жыл бұрын

amazing tutorial for starters. keep it up

@codewithbubb 3 жыл бұрын

Thank you.

@adityabhadange1631 Жыл бұрын

Thanks alot.. Very helpful!

@shekhar_sahu 2 жыл бұрын

The webpack-cli gives an error 'watchContentBase' as an unknown option. Not sure how to solve this.

@octabrg 2 жыл бұрын

Hi, change it with this one `watchFiles: ['src/**/*', 'public/**/*']`. You probably have last version of webpack, that's why you have that error

@omarakki705 2 жыл бұрын

best tuto, big thanks

@codewithbubb 2 жыл бұрын

No problem, glad you liked it 👍

@Dominik3332 Жыл бұрын

super useful! Thanks

@rashad123us 2 жыл бұрын

webpack is telling me 'watchContentBase' in an unknown property, was this property deprecated/replaced?

@eduardoflores1603 2 жыл бұрын

make sure that you have the following in your package json file under devDependencies. I installed the newest one and it gave me the error. Updating it to below worked for me! "webpack-dev-server": "^3.11.2"

@mehemmedkazimzade2730 Жыл бұрын

Very helpful Thank you.

@gopalwebdev 3 жыл бұрын

Love you bro :) It works fine!

@codewithbubb 3 жыл бұрын

Thanks very much 👍

@TheRealNVT 2 жыл бұрын

Where was this tutorial 2 weeks ago!!! Thanks...

@kikevanegazz325 2 жыл бұрын

Amazing, thank you!

@codewithbubb 2 жыл бұрын

Thanks for your support!

@rithikagarwal5799 Жыл бұрын

Great Video

@stephenmoran2427 2 жыл бұрын

Thanks so much, this video is amazing!!

@nidzeksmocni659 3 жыл бұрын

I appreciate your effort! Thank you sir!

@codewithbubb 3 жыл бұрын

Cheers thankyou!

@user-if5fj8tb7f 2 жыл бұрын

Thank you very much! Your video helped me a lot!😆😆

@markanthonyatienza1938 Жыл бұрын

Very well said! :) thank you

@codewithbubb Жыл бұрын

Cheers Mark!

@wesley_james_strength 2 жыл бұрын

Thanks so much.

@codewithbubb Жыл бұрын

You're welcome 😀

@lePrrrrr 3 жыл бұрын

Really cool. Thank you!

@jackblk4 3 жыл бұрын

Nice tutorial, very helpful. I use HtmlWebpackPlugin, it will generate HTML file for us so that we don't need to manually add script or CSS into HTML file like the example. If we need something, it will add for us.

@szymongos5568 3 жыл бұрын

Same here. HTMLWebpackPlugin makes it easier to inject index.js into the index.html. Just in case I added, "inject: body".

@user-zf7oh5iv3l 2 жыл бұрын

thank you so much. i,m from russian federation and my english isn't perfect) but your video help me to understand

@codewithbubb 2 жыл бұрын

Great! Glad you found it useful!

@StickMan1316 2 жыл бұрын

for me the property watchContentBase is unknown to the webpack-cli my version of webpack-cli is 4.9.2 what property replaces watchContentBase

@masterwayne9790 2 жыл бұрын

Thank you so much

@codewithbubb 2 жыл бұрын

No problem, hope you found it useful.

@sudheeshm5248 2 жыл бұрын

Error: [Webpack-cli] failed to load webpack.config.js config [Webpack-cli] referenceerror:_dirname Is not defined

@arcadan 2 жыл бұрын

First, congrats for the video, and thanks for your colab for our community! I just have one question, how would I add this Br or Gzip technics on a existing project create by CRA? Is it possible? Would adding webpack.config.js file work? Thanks!

@aidarousjibril6323 Жыл бұрын

What about if application was created with 'npx create-react-app myApp', How to configure webpack config file if i got a new mac laptop, it logs on the browser 'bundle.js' not the actual file name ?

@razac_zr 2 жыл бұрын

Thank you for this tutorial, Can you please tell me how webpack with tailwind CSS,

@codewithbubb 2 жыл бұрын

You’re welcome. Yes. Yes I can: How To Add Tailwind To a React app kzfaq.info/get/bejne/od-aoNOWp8jYgJs.html

@JavaScriptcher 3 жыл бұрын

Thanks, MAn!! Its working!! :)))

@fullstackprojects5615 3 жыл бұрын

At 3:45 you mentioned file-loader is used to import html to our overall output whereas I know that file-loader is used to resolve import/require of files like images. Wondering why you mentioned html import?

@VishalYadav-nm6xx 2 жыл бұрын

this is a really good tutorial but i still cannot see anything on the webpage like in this example date was on the homepage .. my homepage comes blank .. i have checked the app.js file and everything still no luck .. the html page is loaded correctly and the bundle is also loaded but the bundle seams to be empty because no content is displayed on the screen .. can anyone help

@codewithbubb 2 жыл бұрын

Do you have any errors in your console?

@mikewilliams6732 2 жыл бұрын

Great tutorial. It worked fine locally, but how do you deploy it - and run it - on, say Heroku.

@piyushkanathe9178 2 жыл бұрын

Hi James, I started implemeting with this video. I'm getting error at 14:22, when we first do 'npm run serve', as instructed i installed dev-seerver-package also. in the end I'm getting error at "ReactDOM.render(, appElement)" line, saying "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.". but I configured as video suggested for JS files.

@sunnypathak4224 3 жыл бұрын

Thank you! Can you please suggest any way, to serve this app without webpack-dev-server

@peter-qc9yi 2 жыл бұрын

thank you very much for this. was helpful. even though i had to do alot of googling to the webpack and webpack-dev-serve to work

@gbadspcps2 Жыл бұрын

I found your tutorial helpful, but I'm having trouble getting multiple different HTML pages to work. How would I change webpack config.js to accommodate multiple pages for my website?

@sams1669 3 жыл бұрын

please help! getting this error. [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'Plugins'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? } -> Options object as provided by the user. For typos: please correct them. For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { Plugins: … } }) ]

@sangtran1410 3 жыл бұрын

Great video ! But I have a case need your advise: When I make some javascript error, the page will show the error but when i solved it, the page doesn't hot reload and I need to run manual. What should I do to auto reload ?

@ashish2038 2 жыл бұрын

If we run it locally, it make build slow as it makes first complete web pack , any way to make it fast to run locally, like normal npm start when we create a app and make a small change it loads immediately but in this case it take lot of time to run locally

@3rd_iimpact 2 жыл бұрын

Great tutorial! Do companies ever push the create-react-app to production? Or do they always build it out from scratch like this?

@malikmubasherhassan 2 жыл бұрын

why to configure webpack like this? when we have webpack out of the box when creating app using creat-react-app

@dumadoniagarasambora675 2 жыл бұрын

can you guys help me, I can't install webpack-dev-server. Loading bar never running when I type commad npm install webpack-dev-server or npm run serve and type Y to install webpack-dev-server.

@wittttttt 3 жыл бұрын

Great video! I have a question, If I want to use styled-components, do I still need "style-loader" or "css-loader"?

@codewithbubb 3 жыл бұрын

Great question! I haven't used styled components much to be honest but as far as I know, it's just a JavaScript library so it shouldn't need to have any additional config in webpack. I saw this in their docs but it's just really for server-side rendering: styled-components.com/docs/tooling

@wittttttt 3 жыл бұрын

@@codewithbubb Thanks!

@havefun5519 Жыл бұрын

Cool tut. Thanks. For webpack v5 slight update devServer: { static: { directory: path.join(__dirname, 'public'), }, compress: true, port: , },

@Manojshankar36 2 жыл бұрын

Nice tutorial. A small query, I am trying to update webpack-dev-server to “^4.7.3” but I am unable to start the application and ended up in some errors. Can you please help me with upgrading webpack-dev-server to “^4.7..3” Thanks & Appreciate it

@sandormaraczy6122 2 жыл бұрын

I did everything the same, but keep getting this error: ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/preset-env, @babel/preset-react'

@codewithbubb 2 жыл бұрын

Did you npm install @babel/preset-env @babel/preset-react ?

@sandormaraczy6122 2 жыл бұрын

@@codewithbubb Thank you for your quick reply! Yes I did, but unfortunately the problem remains. I did not find any solutions for that, I also tried out to utilise exactly the same versions from the mentioned packages that you did, but still did not resolve my issue:(

@jayeshthanvi1115 3 жыл бұрын

Npm run build ? Not working .sir please replay?

@codewithbubb 3 жыл бұрын

Sorry for the late reply. Did you install all the dependencies (i.e. npm install)? What error are you getting?

@jayeshthanvi1115 3 жыл бұрын

@@codewithbubb thank you for replay but error resolved

@klhmia 3 жыл бұрын

@@jayeshthanvi1115 Mind sharing your error / fix? I'm having Exit status 1 on webpack --mode production with 'npm run build' command but not sure why. Dependencies are all correct. EDIT: Nvm, it was an issue within my webpack.config.js I believe.

@dumchik7290 2 жыл бұрын

file-loader is deprecated in webpack5. pls make a new video with webpack 5

@abhishek3543 2 жыл бұрын

Will this also work with react native ?

@codewithbubb 2 жыл бұрын

No idea! I would think not though.

@d1hoops975 3 жыл бұрын

can you please do a nextjs version of this please?

@harmmeijer6582 2 жыл бұрын

Whats wrong with using npx create-react-app ?

@michaelrooze278 2 жыл бұрын

nothing but you may not want all the features that comes with the default webpack package. This allows you to use only what you need, resulting in a more efficient environment.

@MuhammadAdnan2.0 3 жыл бұрын

sir please start Vue.Js Series its easy to learn ,,,,,,,,,,,,

@codewithbubb 3 жыл бұрын

Funny you should say that - I started learning it the other day!😀

@MuhammadAdnan2.0 3 жыл бұрын

@@codewithbubb 🙄😊

@tomascarignano5002 2 жыл бұрын

Super super useful. Thank you!

@BobbyBundlez 3 жыл бұрын

have a take home assignment for a job due next week... anyone here down to help me/tutor me through some questions? willing to pay!

@codewithbubb 3 жыл бұрын

What's the assignment?

@BobbyBundlez 3 жыл бұрын

@@codewithbubb i need to recreate a design from envision (im used to figma) but im new to webpack. this tutorial helped me ALOT but do you mind if i message u with a question or two?

@BobbyBundlez 3 жыл бұрын

also wtf. i never knew u could make a react app with just "npm install react" lol.... wayyy lighter tf

@codewithbubb 3 жыл бұрын

Yep, I guess you were using create-react-app before?

@BobbyBundlez 3 жыл бұрын

@@codewithbubb yeah lol so this does the same thing?

@BobbyBundlez 3 жыл бұрын

Also wondering if this method is better for web pack too or doesn’t matter

@johnbangla100 2 жыл бұрын

Finally this code i have added ""start": "cross-env BABEL_ENV=default webpack --watch"" in package.json file. otherwise error found.

@johnbangla100 2 жыл бұрын

Also install npm install cross-env

@TheRonron1994 2 жыл бұрын

I was getting this error while trying to run npm run serve "options has an unknown property 'watchContentBase'. These properties are valid:" Any idea?

@michaelrooze278 2 жыл бұрын

devServer: { port: 3000, open: true, hot: true, },