Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack 

If you are just starting out than just stick to HTML, CSS, Javascript. And really these are the hardest of the web dev learning curve. When your little project starts to get bigger and somewhat complex, take on a framework like React, or Vue. Learning a framework and the techs that surround it are really easy. Because the the majority of your time is spent learning better approaches to a problem and becomming a better programmer. Again these techs and their names may sound overwhelming but are really easy to pick up.

The internet is a million hacks duct-taped together with js. I bet we could simplify it all if we just replaced js with Scheme-in-the-browser... 😏

Welcome to the game

But starting out and moving forward regardless is the best thing to do. Congratulations on that :)

totally echo you !

i swear

I just started using snowpack with svelte yesterday and I was looking for something like this, that compares the different options. The algorithm sees all.

but is true tho lol, I was just looking at WebPack

It's a time-honoured tradition!

Fireship has 460k subs, so things like that are bound to happen

That's what I do :)

It's getting spookier for Halloween

Thing is 50% of time your dealing with a bundler webpack, babel or metro for RN

Jeff has firesense 😋

It's probability. 1 out of thousands of followers is ought to do the same when the video is uploaded.

Thank you!

Thank you.. :) I have written like, devServer : { publicPath: '/dist', contentBase : path.join(__dirname, 'public'), port : 9000 } still, I see this error >>> "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. Coz of this dev-server is not serving the page.. Any tips please ???

@@goldensonu15 from looking closely at the error it gave you, it looks like the contentBase key is not named correctly. You might scratch your head at this, because you see everyone else using contentBase - so the next step is to google 1 of 2 things: either “webpack contentBase not working” or something along those lines to see if anyone else has gotten this error (which will show you other people indeed have ran into this error and have also shared the solution), or if you’re a little more comfortable with the idea of API’s you might think do go directly to the Webpack documentation for the devServer object so that you can see all of the fields it accepts. The first of those two showed me what new field name belongs there, and the second google search helped me confirm that it appears in Webpack 4 the field was called “contentBase”, but now in Webpack 5 they are calling that field “static” and contentBase is no longer a valid field name. So you must have webpack version 5.x installed and it’s just telling you the schema for devServer has changed and that contentBase is no longer a valid field name. For all the options for devServer you can just google something like “webpack devServer” and the top link should take you to the official docs at webpack.js.org In the beginning, everything can be overwhelming so even though your console gave you a pretty actionable and clear error message, it’s totally normal to feel like you don’t know what to do next. This is basic debugging skills, but it can take a while to build the experience and intuition that makes these steps very obvious to you. You’re doing great

You saved me on this issue

@@goldensonu15 what worked for me is changing the contentBase to static. I read on stack overflow that's what should be used

@@Snerdy0867 Just use Vite, it's much simpler and faster. I'm using it in my company.

​@@Snerdy0867 Honestly just read the bundler's docs. It might take you a few hours but it will give you an overview of everything you can use in it and how to use it.

thoght the same

This works but the browser is not able to resolve the import if you do like: import lodash from 'lodash'; this doesn't work since it doesn't know to look into the node_modules folder. So you have to manually locate the package like this: import lodash from './node_modules/lodash'; and if it uses commonjs, ie the require() function instead of `import` and `export` then well, it won't work either. The commonjs `require()` function is not defined in the browser

@@Dev-Siri I also wonder, when importing manually, that even if you supply the path to the package './node_modules/lodash' ... I wonder if the browser would have trouble if lodash itself had its own dependencies which it needed to find. Perhaps a non-issue, but I haven't set up a test yet

​@@bmfitzgerald3 yea its possible. Since even if we supply the path to the browser, it would still be confused as it won't look outside the lodash folder and in the node_modules again. Source Code -----------------------|--------------------- IMPORT ./node_modules/lodash | Some Dependency

@@Dev-Siri exactly, and it also won't work if the dependency has it's own module identifier. e.g './node_modules/chart.js/dist/chart.js' could work but inside of the chart.js file theres a strange import: import '@kurkle/color' It took me a while to figure all this out, now i'm here trying to understand bundlers so i can get chartjs to work

WASM in 100 seconds coming soon...

@@Fireship good lord, hope it comes out in the next 100 seconds 😂 cant wait!!

@@Fireship Even though I know nothing about Javascript or web development in general, still very excited.

Not true for NPM modules.... And for your own local JS module files, maybe sure.

+1

Thank you for saving me time trying to figure this out! :D

Thank you!

My savior

Thank you, I was confused with this one.

Lifesaver.

yeahhhhh

You think you do, you do not

im doing an intro talk on this and using this tutorial as a guide... you have absolutely saved my life

Thank you! :)

I think says a lot about their commitment to a good dev experience

yeah I just tried out snowpacks create snowpack app svelte template yesterday. I'm liking it better than the standard rollup template.

Svelte team is working as much as they can for good developer experience ... They added typescript support too.....

Thank you.