Topics
Published on April 6, 2017 by Mindspace
Want create site? Find Free WordPress Themes and plugins.

Learn Webpack 2 – what it is, how it works and how to use it!

The full source code can be found in the following Github repo (choose the right branch!): github.com/mschwarzmueller/yt-webpack2-basics

Choose the 05-webpack-babel-scss-basic-finished branch to start with the same project I do!

The video for the basic Babel + CSS workflow can be found here: youtu.be/8vnkM8JgjpU

Want to become a frontend developer? Consider diving into some of my courses on Udemy:
Ionic 2 – The Practical Guide for only $15: www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/?couponCode=GETINTOIT
Angular – The Complete Guide for only $15, too: www.udemy.com/the-complete-guide-to-angular-2/?couponCode=YOUTUBE_2
Vue.js 2 – The Complete Guide for only $15: www.udemy.com/vuejs-2-the-complete-guide/?couponCode=YOUTUBE_VUE

Want to get some 1-on-1 coaching with experienced developers? Have a look at Savvy: www.savvy.is/?ref=9fee2b (Discount Code 9fee2b)

You can follow me on Twitter (@maxedapps), Facebook (www.facebook.com/mindspacechannel/) or visit my Website (mschwarzmueller.com).

See you in the videos!

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

57 Comments on "HTML + IMAGE LOADERS | Webpack 2 Basics Tutorial"

Notify of
avatar

Carlos Renato Hernández Rivas
Guest
Carlos Renato Hernández Rivas
5 months 17 hours ago

Excellent, I've bought some of your courses and I've found your youtube channel, a treasure for me!It's awesome your work, thanks for sharing your knowledge Max. You should resume a laravel with new features of versions, I love backend hehe. Kind Regards from Nicaragua!

Carlos Renato Hernández Rivas
Guest
Carlos Renato Hernández Rivas
5 months 1 hour ago

Excellent, will be wating for.Thanks!

Academind
Guest
Academind
5 months 1 hour ago

There'll definitely be more Laravel again in the future 🙂 Thanks for your awesome feedback Carlos!

Zerk
Guest
Zerk
5 months 27 days ago

I was having a problem with images like most ppl in the comments, so I literally copy pasted your webpack config and even that gives error GET 404 (Not Found) right up until the part where i commented publicPath key in options at the part where we check for images. As u can see public path was adding one more img/ to the img/webpack.logo path in html. Proly something changed over these few months cause it definitely works in the video, but fails today even if i download that branch and run it. As for the rest, good stuff as always 🙂

John Mckay
Guest
John Mckay
5 months 10 days ago

Got it, thanks!

Zerk
Guest
Zerk
5 months 10 days ago

It's not. I took a Webpack course and it's clear now. That PublicPath is not needed. We specify publicpath once in the output section and it applies to the whole project. PublicPath tells webpack where the bundlebuild will be served from on the server, so it can put that PublicPath part in front of any path.

John Mckay
Guest
John Mckay
5 months 10 days ago

I had the same issue, maybe it's a Windows vs Mac thing? I'm on WIndows, but Max is on Mac

Samuel Resua
Guest
Samuel Resua
5 months 27 days ago

man. your videos are brilliant

Academind
Guest
Academind
5 months 27 days ago

Awesome to hear that Samuel, thanks a lot! 🙂

Steve Davies
Guest
Steve Davies
6 months 24 days ago
This entire process fails, if the img is called in anything inside of index, for example in a React app, where the image tag is inside a component. In this case , the img/ folder is never built, nor copied to dist.This could be to do with the fact that only the copying of the html file causes the img loader to fire, if anything else is done (such as compiling react classes and templates) it will fail. Thus whilst its a good intro, the example above is pretty thin, and unlikely to be used, it would be great to… Read more »
Josh Reynolds
Guest
Josh Reynolds
6 months 26 days ago

Great series and everything is explained perfectly! Thank you.I also had to comment out the publicPath: 'img/' line in the options for file-loader.How come this is happening?

Josh Reynolds
Guest
Josh Reynolds
6 months 25 days ago

Cool! Thanks for the reply 🙂

Academind
Guest
Academind
6 months 26 days ago

publicPath needs to be commented out because the directory structure (in the dist/ folder) changed and images are now located on the root folder. I prefer this approach but it really depends – there's nothing wrong about copy-webpack-plugin

Josh Reynolds
Guest
Josh Reynolds
6 months 26 days ago

Also would you prefer this or to use the copy-webpack-plugin?

Hesan Aminiloo
Guest
Hesan Aminiloo
6 months 28 days ago

Hello !Really nice tutorials! Really Helped! Thanks.

Academind
Guest
Academind
6 months 28 days ago

Happy to hear that, thanks so much for your nice feedback Hesan!

Engin kayalı
Guest
Engin kayalı
7 months 2 days ago

Thanks so much, nice tutorial

Academind
Guest
Academind
7 months 2 days ago

Thanks for your really nice feedback Engin!

Ardak Tileu
Guest
Ardak Tileu
7 months 6 days ago

After your basic video i changed my mind)u was right webpack is awesome

Academind
Guest
Academind
7 months 6 days ago

Haha, it really is. I'm happy you're liking the videos!

Ardak Tileu
Guest
Ardak Tileu
7 months 6 days ago

Thank u!

Marcelino Jorge Romero
Guest
Marcelino Jorge Romero
7 months 6 days ago

is this possible to do using angular-cli? (any references?) Thanks for the awesome videos!

1 2 3
wpDiscuz