Parcel ...the Webpack KILLER?!

Parcel is AWESOME. And in many, MANY cases, you don't need to haggle with Webpack anymore, which to some developers is a dream come true, because messing with a build system is one of the most painful parts of modern web application development.
Example Code: github.com/lea...
Webpack Tutorial: • Webpack Tutorial - Rep...
Why do you need a build system? • WHY YOU NEED A BUILD S...
~-~~-~~~-~~-~
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
• Tailwind CSS - why CSS...
~-~~-~~~-~~-~

[@im.empimp]

@LearnCode.academy - re: "… it's got a little messy here cuz I'm zoomed in so much, not quite used to this, but *_I want to make it easy for everyone to see_* …" *_Thank you so very much!_* Not enough coding KZbinrs know or care enough to do this, and it particularly sucks when those videos use a small area on the far left and right of the video, with a massive unused area in between. While it's easy to zoom in, resolution drops, and I end up scrolling so much it's hard to actually pay attention. I really appreciate you keeping it as large as realistically possible, even if it's not your normal working configuration!!! And thank you for sharing Parcel, it looks _amazing_ and I can't wait to start using it!

[@sergi3629]

I just spent 2 days in configuration hell with webpack and while it's doing what i wanted I'll switch to this for the simplicity, love it.

[@kotopult]

“One of a gratest pain points” - sounds so good and so true for build configuration :D

[@hachij_]

this is awesome

[@lincolnpires]

I watched elsewhere, came to let my like - concise, to the point, good info. Checking out the website to see what's there...

[@jeremycohn9992]

Was just about to learn webpack. Wow, glad you posted this one!

[@TheSyms]

What sorcery is this?!

[@NabilTharwat_]

For real!

[@danilovegap]

This is what tooling should be, I miss the old days of just concentrating brain energy on design and programming

[@learncodeacademy]

Yes, exactly. Tooling should make life easier than it used to be!

[@dealloc]

The best part about Parcel is that it allows you to import more than just JS out of the box. For example it has support for importing Rust files, which then will be compiled to WebAssembly and useable. It only requires you to create a .rs file, use #[no_mangle] for your exported functions and you're off! Parcel is truly amazing.

[@serhioromano]

This one is real gem. Thank you.

[@shnam928]

Perfect! How do you use command autosuggestion in your terminal?

[@ChunHoiLam]

Seems like a really good tool, will continue to explore it! Thank you

[@arpitkalra2889]

It's really awesome. Thanks for uploading !!!

[@bishwajeetpandey1570]

Hellow guys as beginner to parcel facing an issue please try to help me out , According to documentation Parcel automatically generates sourcemaps by default , Fine, it is generating .map files in dist folder but when in i write console.log in my source code or any error thrown from my source file . These message display in the browser console but they still pointing to build files like index.abcderf.js rather than my source file index.js :disappointed:. So please tell me Is there any way so that console statment or errors maps to my source code file not to build file present in dist folder of parcel?

[@Ericsicons]

HMR does not work for me unless add the below, if I don't it just reloads the page if (module.hot) { module.hot.dispose(() => {}); module.hot.accept(); }

[@HarpreetSingh-cz2zh]

getting this: This site can’t be reached localhost refused to connect. Search Google for localhost 1234 ERR_CONNECTION_REFUSED have same code as you at 1:44 mark

[@keffbarn]

Have been using parcel for a while. It's awesome. It also has experimental tree shaking right now.

[@BenRacicot]

HMR and hot CSS are my #1 ask for Angular projects. I truly hope Parcel has the skills to win over Webpack.

[@DevSprout]

This is really cool! Thanks for sharing :)

[@AbdallaElmedny]

This tool has great potential due to the fact its so simple, but does it also support custom configuration like webpack?

[@BIGALRETRO]

what shell theme is showing the node version like that?

[@devcoffee]

Definitely going to try this out!

[@bellekiller]

what is the console interface you are using please?

[@ПавелОвсянников-н2д]

Really awesome but... Does it have API proxy functionality? I can't find it((

[@PhilipFabianek]

Parcel might be the one. I've been trying out many technologies for the past 6 months. Next.js - this one seemed perfect at the beginning, but when I started to create large applications, the amount of config needed was just as for webpack so what was really the point of using Next at all? (still one of the best starters for small - medium projects) What I like about webpack is the fact that once you understand it you can seriously create any functionality you want (for both front-end & back-end) and it is very performant with a huge user base. You can create a boilerplate and get going in no time aswell but Parcel seems really interesting (and performant aswell!) and it might be worth to take a look inside, it might possibly be the best startup for new developers.

[@AndreasZetterlund]

Does Parcel have working source maps yet? Last time I tried it there were no source maps.

[@xLittlePsycho]

Just tried it out, seems pretty efficient :). But there were some CORS problems with using axios on the parcel server.

[@learncodeacademy]

Interesting! I'll have to look into that.

[@lemonplz]

Thanks you . Parcel rocks.

[@armLocalhost]

Did you try webpack v4 with mode: 'development' and 'production'?

[@diegognoatto590]

bro i got o knew parcel trough your videos, i thought my life was magically enhanced since them , but im having a hell lot of bugs with my project, i got a index.html in the root and modules/index.html, blog/index.html etc, that parcel does is show my homepage in any link from menu i click. it seems as soon u got just one html is goes right bot it lose itself wn u got multipages. any tip i could be doing wrong? thanks

[@elfpimp1]

ABSOLUTELY, love parcel! And it is indeed a Web pack killer..

[@superpotato787]

Let's go CHAMP Webpack!!

[@SehabVeljacic]

What about TypeScript + React?

[@tautervirus4669]

sorry to ask but im a beginner in web development and started watching your tutorials which were in sublime text only to realize they were made in 2013 so is sublime text still a good program to use? or is hyper better? and also what language is parcel in is it still javascript? i know you might not respond but if you do i appreciate you helping me.

[@NabilTharwat_]

So wait, I'm still starting out with all those task runners/build systems and I've got lots of options like (Grunt, Gulp, Parcel, etc..) I've already experimented with Grunt and Parcel, is it a matter of experiment? Like, should I experiment with all of those and check which one has better performance, suits my current project well and is easier to use? Or are there other rules that I need to judge by? And one more thing, what about WebAssembly? It existed in your old mind maps but not in the new ones, why is that? + How do you get updated with all those technologies?

[@mattd5419]

You don’t need to ditch webpack. Laravel-mix is very easy and more flexible. I think you should give it a try.

[@JohnSmith-zl8rz]

But there's not much plugins ready? I mean I see tons of gulp plugins and webpack loaders too, by example if I need a parcel Twig (template engine) is available?

[@learncodeacademy]

I haven't tried it, but there is a plugin for it: www.npmjs.com/package/parcel-plugin-twig

[@raj080288]

should I ise webpack or parcel?

[@MarvinMedeiros52]

Very excited with parcel here :D

[@surell83]

Ok, wow. have to try this out

[@TerryDiLuzio]

Thanks for presenting Parcel it's an amazing tool! What Hyper plugins are you using (Node versions, colors etc.)

[@learncodeacademy]

Almost all of this is oh-my-zsh using zsh as the shell instead of bash...I'm using the geometry zsh theme.

[@mistypixstudios6304]

can parcel have a config file like webpack if we decide to configure something in detail?

[@learncodeacademy]

The "parcel way" is to use plugins instead...find the plugin you need and it will either do what you want out of the box, or look to a config file - like the .babelrc example.

[@jsonkody]

It looks nice in video, but I did same on my machine and still getting 404 :( File names are correct, everything looks same (except OS - windows :( But I am using git bash). Hmm OK it works fine when I type "parcel index.html" Hmmmmm .. and now it stopped autoreload and I cant get this functionality back whatever I do ... sry but this soft works like wild magic ;( My bad .. I just jumped into dist/index.html and didnt notice.

[@王浩然-c4q]

What is your VSCODE font ? It look like beautiful!

[@learncodeacademy]

It's actually just the Mac default - Menlo

[@YevhenZhuchenko]

Hey, I have a problem with my build environment. It works with gulp, babel and webpack. And currently compiling scripts task can take about 10-12 seconds. Is there a way to optimize this step? Maybe I can replace wabpack with parcel?

[@learncodeacademy]

If pure speed is your goal, try looking into rollup. It configures about like Webpack 4 and is hands down the fastest of the 4 build systems.

[@YevhenZhuchenko]

Thanks! I'l try. Didn't heard about it before.

[@ytolstoy]

love your terminal prompt, is it one of oh-my-zsh? if yes, which one?

[@maymumk3618]

Youri Tolstoy he uses geometry zsh theme

[@tkdevlop]

Wow love it!!!

[@Alessandro-nq3tm]

OMG thank you , really!!

[@deltaskyhawk]

Web development is such a nightmare these days! Everything is in a state of transition to where?

[@learncodeacademy]

Hopefully better! So far, the things that tend to overpower other things make it because they make life easier. Compare React to Backbone and it's just incredibly better...so much less effort goes into making an app stable, so you can focus on just building stuff. Compare CSS grid to float...on man, I never want to code float layouts again. In 19 years, I've noticed that most tools, once the community settles on them, tend to make life easier and are worth the effort. It's when you try to learn every bleeding-edge thing that some developer at tweets about that you get frustrated. Wait 6mo and see if it's still around, then learn it.

[@webdesigner8904]

LearnCode, Very well said...

[@learncodeacademy]

I'm actually working on a "talking point" video on how to avoid developer fatigue and stay current at the same time. Our industry is so amazingly enjoyable to be a part of, it's sad to see a lot of devs get frustrated from time to time.

[@FlavioFearn]

Great! We need that right away! thanks for the video, will try parcel just... now! ;)

[@OloAndersen]

LearnCode.academy that’s a very good advice!

[@HarpreetSingh-cz2zh]

Wowwwww!!! In love. Thanks bud! How to use sass with this?

[@jasonreviews]

can you show us this with axios? thanks

[@boradmay]

good as always, thanks man

[@this.channel]

There's an issue currently installing Parcel on node 11.0.0 / Linux github.com/parcel-bundler/parcel/issues/2245

[@bruceallday]

Code is a liability. The less the better.

[@namsir]

WOW WOW......WOW?????????????? i'm diving in parcel deeply now :D

[@learncodeacademy]

iknowright? It's got it's imperfections, but man, it's making life so easy for builds

[@theasdazx]

I don't really understand. Should we keep switching technologies when there's a better one? or should we stick to a one that does the job

[@cokolele]

Wellp it's up to you. I don't think there are any good arguments yet why you SHOULDN'T use webpack. You get the same results with webpack it's just about speed and configuration (webpack 4 already has zero-config option and optionable configuration is great imo if you have large codebase and you just need those configs). If you are already comfortable working with webpack then I dont see a reason to move to parcel. Also, parcel is new so it does not have as large ecosystem as webpack does. Just keep an eye on it for a few months if there is something really better into it other than speed. (also, im not sure about this but parcel uses workers (nodejs threads basically) which is new tech and it may be the reason why it is so much faster, if yes i can see a webpack implementing it aswell) And because of this, i am kinda surprised how excited Will is. I dont get it why it should kill webpack ? For me it seems like webpack 4 without configurability on steroids and sticker "EASY" on it

[@learncodeacademy]

There's definitely no reason not to use Webpack. That being said, ask any developer if they enjoy working with a build system and many if not all will say that working with a build is annoying and frustrating. Also, you only have to mess with the build system every few months, so you often forget everything in-between. The reason I'm so excited about Parcel is because the first time I went to use it, learning Parcel + configuring a new build took far less time than setting up a build with the very-familiar Webpack. The SECOND build I did with Parcel took a couple of minutes and I was off to building features...it made my day.

[@jsiszero]

Welcome to Web Development in 2018. You must be new to the industry. Good luck, it's not going to get any easier to keep up from here.

[@aurelianspodarec2629]

We learn today, for a better future. Should we learn it? Up to you - it's a risk. It's like bitcoing - should you invest or not? It might crash or not. It doesn't matter. If you know web development it'll take you a week to three to adjust to whatever change anyway... so doesn't matter.

[@animakuz]

You literally just have to make a random project and try it. If it works for you you use it, if it doesn't you don't. There are still people using Angular 1 and many many sites still being built with jQuery. The nice thing about this industry is that you have many choices and switching from one to the other is relatively easy once you have a firm grasp on the fundamentals like javascript, HTML and CSS.

[@kevin.raimbaud]

Sounds cool.

[@writuparnachowdhury7891]

It's awesome...but can I compile SCSS using parcel?

[@learncodeacademy]

Yep! parceljs.org/assets.html#scss

[@maxmoriss]

Cool stuff! What’s a theme and a font used in this video?

[@learncodeacademy]

Yep! Rainglow it is....dang, great call!

[@cristianrgreco]

Font is called 'Monoid': app.programmingfonts.org/#monoid

[@Madmadfr]

Does it compile / export assets as good as Webpack tho ?

[@learncodeacademy]

It does...and it's pretty configurable with plugins as well. Webpack is definitely more mature, but I fully encourage anyone wanting to build out any features Parcel they see missing.

[@zinca13]

hey, all your tutorials on web development are great, however there is a concept that absolutely no one discusses about and I'll be forever thankful if you could give me a short answer: Let's say we have a website that only has one element, for example an image IMG1 and if an user clicks on it, it will change to another image IMG2 (this change should be visible only to the users that clicked and triggered the event). Then, I have another event that triggers when a total of 100 users clicked on the image, and this time I want to dynamically change the image to IMG1 (but now I want the change to happen and be visible to all the users of the website). The confusion starts when I realise that for both events the function would be the same (changing the src of that HTML element) yet I want it to have a different effect: - on the event of a user click change it for that user only. - on an outside event that doesn't involve a specific user, change it for all the users to see the same image. How does this work? what is the thing that makes the difference between a HTML change that only affects the users locally (on their actions) and a change that has a global effect (to all the users). I feel like I'm missing out something very important, but in essence it seems to be such an easy concept and the fact that makes me so confuse is driving me crazy. If anyone could make this clear for me I'll be extremely thankful!

[@jamesdean9325]

Good question, here is how I would solve it (disclaimer: probably not the best solution). In a fullstack SPA, I would have a server-route that would find a counter in my database, increment the counter by one, and check if it is above 100. If it is not I will store it back in the database. If it is I will reset the counter, store it back in the database, and change the IMG1 resource to be whatever you want it to be. This won’t show up to every user as soon as the counter is reset, but only once they re-fetch the IMG1 resource.

[@zinca13]

Thanks for the answer. I wasn't actually interested in the incrementing bit but more the idea of showing every user the same thing, but I got into the server stuff few days after asking the question and realised that using the MeteorJs framework with MongoDB database is the best way possible when dealing with web apps that are not that complex.

[@sc06mad]

have you guys tried it already? is it really better than WebPack?

[@cyntler-softwaredeveloper637]

I know Parcel and is awesome.

[@cst256]

What VS Code theme and font is that?

[@learncodeacademy]

It's Rainglow...comes with a whole bunch of beautiful themes.

[@Rafelder]

I guess you read over the question for the font family. I'm also very interested.

[@learncodeacademy]

Hah, sorry...I'm using the default Mac font for VS Code "Menlo, Monaco, 'Courier New', monospace"

[@newrind]

Nice vscode theme. What is it?

[@maymumk3618]

@Wil Medina it's Rainglow

[@newrind]

Maymù Mk Thanks bro!

[@maymumk3618]

Yes really a nice one, cheers

[@MrDONshinigami]

Wow, parcel is cool, but what about traps and pitfalls?

[@learncodeacademy]

I'd say the only bug I've encountered is it doesn't always catch new files and reload the way I expected. Developing on it all day, I may have to restart it a couple of times...but I do that with Webpack now, too, so ¯\_(ツ)_/¯

[@vaibhavm1986]

Does it give sass compiler ?

[@learncodeacademy]

Yep, SASS, LESS, Stylus all supported.

[@vaibhavm1986]

Thanks a lot for your response i really appreciate it 😊 After your video i was researching more about webpack vs parcel. I found parcel provides most of the plugins out of the box. and therefore its cool However i have come across through another build tool, Rollup Which some of the websites claim that is even better and has advantages over webpack and parcel I was wondering to take your opinion about the same.. If possible,😊.Once again thank you

[@learncodeacademy]

If you are looking for build SPEED, then rollup is currently king. So might be a good fit for developing in a Docker container where filesystem latency can mess with build/reload speed. It's pretty darn close to webpack 4 with build configuration.

[@vaibhavm1986]

Oh ok nice 👍

[@hotplugin]

Just awesome

[@mkm1015]

What's the best text editor? Is it Visual Code??

[@learncodeacademy]

I would definitely say yes, VS Code is the best these days. Some talented devs I know still prefer Atom or Sublime Text, but most are on VS Code for web dev.

[@mkm1015]

LearnCode.academy if I can make a suggestion - could you please make a video like some beginners guide into web dev? Like, where to start, how much to practice a day etc.?? I am on the fence about getting into this whole web dev thing but I get panic attack when I see all these new things you have to learn, I just don't believe if it's doable :) I know you are busy. If you can't do such a video, no biggy. Cheers bro

[@pengekcs]

to think that i wanted to learn webpack before finding this...

[@aminuabdulmanaf4434]

Nice shell configuration, anybody knows how to achieve that on my machine?

[@getrekt1386]

is this the newboston guy?

[@JoeBob79569]

I really like this type of video, really fast and to the point. Nothing annoys me more than someone who blabbers on for 10 minutes without really telling you anything.

[@kengresify]

for a min i thought this is an April 1st fools day video...

[@amineabdellahoui5912]

RIP Webpack !

[@ahizzle]

pretty cool

[@MDobreff]

Great video! Your terminal looks great! Can you share your .bash_profile file :)

[@learncodeacademy]

It's actually oh-my-zsh with the geometry theme installed and slightly tweaked

[@MDobreff]

Thanks!

[@boot-strapper]

Nice!

[@18something]

Im in

[@HarryPujols]

RIP Webpack.

[@halibegic]

Nice 😍

[@aleksandrassivkovas9966]

Well I do not like when software automatically does something without telling me anything about it.

[@JohnSmith-zl8rz]

I start learning webpack and now it there's a webpack killer? gosh!

[@learncodeacademy]

I'm hoping it gets to the point where it kills Webpack, but it will take more maturity. I'm definitely encouraging developers to help build the parcel community support, though...because this workflow is much more enjoyable than Webpack.

[@G1une]

I have a very negative experience with it. - it had a bug with style bundling (don't know for now), so I had to add each style file directly into head instead of importing it in another style file - no ability to use pug - no ability to comfortably inline svg - it adds hashes to filenames, so I can't use background-image in html That was awfull! Only newbie, who previously used raw css & html can admire this "webpack killer for stupid".

[@learncodeacademy]

It reminds me a lot of Visual Studio Code... When VSCode first came out, it looked promising, but just too buggy to ACTUALLY use Then it got better about a year later, then as good as Atom, and now it's far surpassing Atom. Parcel has been like that... 6mo ago: nah, too buggy Today: I'm using it because any bugs/quirks still make it much easier than Webpack to get most builds going. 6mo from now, if people contribute, I can see it destroying the Webpack workflow and being extremely stable at the same time. So yes, not perfect, not everything's supported, but it's getting better fast, and I want to back it, because build/local-dev systems are still more frustrating than they need to be.

[@edu.paixao]

WoooooooooooooooooooooooooooooooooooooooooW! Very easy!!!!! :D

[@dgdev1024]

Bye Webpack!

[@ItsBao93]

Love

[@carloschulo]

wow

[@harshitpant3067]

I heard webpack people also did some zero config stuff with webpack 4 . But it is not good as parcel. See scotch.io/tutorials/whats-new-in-webpack-4#toc-0cjs

[@thenecroyeti1]

Oh fucking hell, not again.

[@CarloRizzante]

Pretty cool. Really smart. But why people keep purposely omitting semicolons, that's not very smart :-D

[@wedding_photography]

Carlo Fioretti Rizzante what do you mean?

[@learncodeacademy]

Ah, I've been doing it for a few years now and it really cleans up the code. Took me a while to get used to the idea, but since everything goes through some sort of transpiler or optimizer anyway, it's never caused a single problem.

[@problemchild959]

its the new ES6, it doesn't use them anymore, but you have to format code slightly differently or you will still get an error. for example I used to put ( on a new line which works great if you use the semi-colon, but if you use the no semi-colon format it has to be on the same line. example with react render: (hopefully KZbin doesn't reformat this comment) this will error in ES6 return render { } this will not error return render { } its a weird concept to grasp but its the new flow that ECMAScript (es6+) is taking

[@calebprenger3928]

Every try writing...JavaScript?

[@wepranaga]

👏👏

[@hamodeyDooba]

You just confuse new developers with this title,parcel will not kill webpack

[@lionardo]

useless for angular projects but sounds promising.

[@dr4t]

Hey, you know who else always goes for the shiniest thing, besides the so called JS "devs"? Ostriches.

[@learncodeacademy]

Hah nice. I avoid shiny things unless they add value or time back into my life. Parcel has already hands-down done that, so I'm very happy about it!

[@ahsath]

What? This is witchcraft

[@learncodeacademy]

Haha...iknowright?

[@smokkku]

So. It is 0:30 and you just invalidated that clickbaity title. Do I need to watch more? Nope.

[@learncodeacademy]

Hah, well...it has killed webpack for me and lots of people I know, so ¯\_(ツ)_/¯ . But definitely don't feel pressure to watch how it works.

[@smokkku]

I know how it works. It is nice for toy/demo projects and YT movies. But once you try applying it to real-life project, with multiple entry points, each with a bit different configuration, customized data transformations, code generations etc. its simplistic design just cannot cope. Which you admitted in 0:30, so WebPack still has bright future as a tool for "big boys" ;-)

[@alizeaiter478]

is this another April fools day joke of yours again? is too freaking simple to be true

[@learncodeacademy]

Haha...no, this one's real. :)

[@CASMANWHAT]

yay die webpack, die.