React Webpack Setup From Scratch 

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

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.

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

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

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

Thank you for getting me started on webpack.

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

Thanks for creating this tutorial

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

Everything crystal clear... awesome work❤️

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

Thanks James! Exactly what I was looking for

Thank you Sir. Really useful tutorial it was 😀

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

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

Excellent tutorial. Thank you

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."

best tutorial, thanks codebudd!

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

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.

beautifully explained, thank you

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

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

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

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

Thanks alot.. Very helpful!

Love you bro :) It works fine!

I appreciate your effort! Thank you sir!

best tuto, big thanks

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

Very well said! :) thank you

Thanks so much.

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

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?

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

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

Really cool. Thank you!

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'

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

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.

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

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?

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 ?

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

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: … } }) ]

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

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

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

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

can you please do a nextjs version of this please?

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!

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

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

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.

Very helpful Thank you.

Will this also work with react native ?

Npm run build ? Not working .sir please replay?

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.

Man seriously, thank you. You explain so well.

Thank you so much

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 ?

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

super useful! Thanks

man, what a clean explanation thanks buddy

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

Best video of webpack

Great Video

Clear and concise. Thank you!

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

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

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!

amazing tutorial for starters. keep it up

Amazing, thank you!

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.

Whats wrong with using npx create-react-app ?

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

Thanks so much, this video is amazing!!

Super super useful. Thank you!

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