Topics
Published on April 6, 2017 by Mindspace

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!

Leave a Reply

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

Notify of
avatar

Zerk
Guest
Zerk
4 days 13 hours 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 🙂

Samuel Resua
Guest
Samuel Resua
4 days 22 hours ago

man. your videos are brilliant

Mindspace
Guest
Mindspace
4 days 10 hours ago

Awesome to hear that Samuel, thanks a lot! 🙂

Steve Davies
Guest
Steve Davies
1 month 1 day 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
1 month 3 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
1 month 3 days ago

Cool! Thanks for the reply 🙂

Mindspace
Guest
Mindspace
1 month 3 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
1 month 3 days ago

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

Hesan Aminiloo
Guest
Hesan Aminiloo
1 month 5 days ago

Hello !Really nice tutorials! Really Helped! Thanks.

Mindspace
Guest
Mindspace
1 month 5 days ago

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

Engin kayalı
Guest
Engin kayalı
1 month 10 days ago

Thanks so much, nice tutorial

Mindspace
Guest
Mindspace
1 month 10 days ago

Thanks for your really nice feedback Engin!

Ardak Tileu
Guest
Ardak Tileu
1 month 15 days ago

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

Mindspace
Guest
Mindspace
1 month 15 days ago

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

Ardak Tileu
Guest
Ardak Tileu
1 month 15 days ago

Thank u!

Marcelino Jorge Romero
Guest
Marcelino Jorge Romero
1 month 15 days ago

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

Muhammad Ali
Guest
Muhammad Ali
1 month 16 days ago

Simple, clear and right to the point. Many thanks

Muhammad Ali
Guest
Muhammad Ali
1 month 16 days ago

I am enrolled in and enjoying your courses MEAN stack and Ionic2 😉

Mindspace
Guest
Mindspace
1 month 16 days ago

Really happy to hear you're liking it Muhammad!

1 2 3
wpDiscuz